border-image给元素的边框绘制图像。
border-image-sourceborder-image-spliceborder-image-repeatborder-image-widthborder-image-outset <body> <div class="box"></div> </body> .box{ width: 100px; height: 100px; background-color: lightgoldenrodyellow; background-clip: content-box; border: 10px solid; border-image: url(./imgs/b.png); /* border-image-slice: 27; */ /* border-image-slice: 54; */ /* border-image-slice: 81; */ }border-image-slice:top right bottom left，将图片分割成九宫格，
四个角 从图片上分割出的四个角，成为边框图像的四个角。 左上角左下角右上角右下角 四条边 从图片上分割出的四条边，通过重复、伸缩来适应边框尺寸，成为边框的四条边。 上边下边左边右边 一个中心区域 默认不起作用。当使用关键字fill，从图片分割出的中心区域将覆盖元素的背景图像。有时候我们想要的border可能不需要那么长。
<body> <div class="box">珍惜粮食</div> </body> .box{ width: 100px; height: 100px; /* border-top: 2px solid currentColor; */ border-top: 2px solid transparent; border-image: 100% 0 0 linear-gradient(90deg,currentColor 64px,transparent 0); }border-image-splice border-image-repeat
