介绍 border-image-slice: | % |填补; & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; style>
div {
边界:30 px固体透明;
border-image: url (& # 39; https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png& # 39;);
border-image-repeat:圆形;
border-image-slice: 30;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div>
DIV使用图像边框
& lt;/div>
& lt; p>使用的图片:& lt;/p>
https://www.yisu.com/zixun/& lt; img src=" https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png ">
这篇文章主要介绍如何使用css中的border-image-slice属性,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
, css border-image-slice属性用于指定图像边框(顶部,右侧、底部,左侧)的向内偏移,图像会被分割为九个区域:四个角,四条边以及一个中间区域。除非使用了关键词,否则中间的图像部分会被丢弃。
border-image-slice属性规定图像边框的向内偏移。
<强>语法:
<强>属性值:
●号码:数字值,代表图像中像素(如果是光栅图像)或矢量坐标(如果是矢量图像)。
●%:相对于图像尺寸的百分比值:图像的宽度影响水平偏移,高度影响垂直偏移。
●填补:保留边框图像的中间部分。
<强>注释:
该属性规定图像的上,右,下,左侧边缘的向内偏移,图像被分割为九个区域:四个角,四条边以及一个中间区域。除非使用了关键词,否则中间的图像部分会被丢弃。如果省略第四个数值/百分比,则与第二个值相同。如果省略第三个值,则与第一个值相同。如果省略第二个值,则与第一个值相同。
<强> css border-image-slice属性示例