CSS：border-image

原创

我的代码呢 2022-12-17 00:40:31 博主文章分类：深入浅出CSS ©著作权

©著作权归作者所有：来自51CTO博客作者我的代码呢的原创作品，请联系作者获取转载授权，否则将追究法律责任

border-image属性对图像的规格和比例比较高，导致使用成本比较高。另外，常见的场景中，大家更倾向于扁平化而不是非拟物化，边框装饰通常在项目中不会出现。

border-image是由多个CSS属性缩写的，比如:

CSS：border-image_html

border-image-source属性值是一个image数据类型，那么所有图像类型都可以作为边框，比如渐变图像

border-image-slice属性作用是对原始图像进行划分，划分方位和顺序同margin一样，遵循上右下左的顺序。属性值是1到4个数值或者是百分比，后面可以带一个关键字fill：border-image-slice: 20% fill;

border-image-slice：20，表示在距离原图像上方20px、右侧20px、下方距离20px、距离原图像左侧20px。

CSS：border-image_css_02

默认情况下，图像中心位置不参与填充，如果想要填充的话，就使用额外的fill关键字：

.box{
  border-image-source: url("../img/bg.png");
  border-image-slice: 33.33% fill;
}

CSS：border-image_前端_03

CSS：border-image_css_04

属性值支持1~4个，不同的数量的值所对应的方位规则也是一样的。border-image-width的初始值为1。有这样几种情况：

border-image-width属性是数值，那么这个数值作为系数和border-width的宽度相乘结果作为边框图片的宽度，比如：
border-image-width为具体长度值，那么边框图片的宽度就是border-image-width的值。如果border-image-width为0，那么边框图片可能消失。
border-image-width属性值是百分比，那么就是相对于元素自身的尺寸计算了，水平方位是相对于宽度计算的，垂直方向是相对于高度计算的。
border-image-width属性值为auto，就使用border-image-slice值作为边框高度。
border-image-width不支持赋值