如何使用border-image做大屏公共组件的边框
示例如下
首先我们先做一个盒子示例 效果如下
<div class="box">
内容
</div>
<style>
.box{
width: 600px;
height: 400px;
background-color: rgb(211, 191, 247);
border: 30px solid red;
}
</style>
接下来使用边框属性border-image 简写方式
原始图片
代码效果图
.box{
width: 600px;
height: 400px;
background-color: rgb(211, 191, 247);
border: 30px solid red;
border-image: url('./border-diamonds.png') 30 30 round;
}
border-image属性示意
只有图片源的效果border-image-source
.box{
width: 600px;
height: 400px;
background-color: rgb(211, 191, 247);
box-sizing: border-box;
border: 30px solid red;
/* border-image: url('./border-diamonds.png') 30 30 round; */
border-image-source: url('./border-diamonds.png'); /* 图片路径 */
}
添加切割效果border-image-slice 控制四个角
border-image-slice CSS 属性将使用 border-image-source 引用的图像划分为多个区域。这些区域组成了一个元素的边框图像。
切分过程会将图像分割为 9 个区域：四个角、四个边（edge）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
上图说明了每个区域的位置。
区域 1-4 为角区域（corner region）。每一个都被用于组成最终边框图像的四个角。
区域 5-8 边区域（edge region）。在最终的边框图像中重复、缩放或修改它们以匹配元素的大小。
区域 9 为中心区域（middle region）。它在默认情况下会被丢弃，但如果设置了关键字 fill，则会将其用作元素的背景图像。
border-image-slice 属性可以用四个指定的 值来表示每一个图像切片的位置。负数是无效的，而大于其相应的最大尺寸的值则会被限制为 100%。
仅指定了一个位置（1 个值）时，创建的（上下左右）四个切片将具有相同的宽度/高度。
当指定了两个位置（2 个值）时，第一个值表示垂直方向的两个切片的高度（即 top 与 bottom），第二个值表示水平方向两侧切片的宽度（即 left 和 right）。
当指定了三个位置（3 个值）时，第一个值表示顶部切片的高度（即 top），第二个值表示水平方向两侧切片的宽度（即 left 和 right），第三个值则表示底部切片的高度（即 bottom）。
当指定了四个位置（4 个值）时，这四个值则分别对应 top、right、bottom、left（上、右、下、左）四个切片的宽度/高度。
可选值 fill 可放在上面声明的值的末尾。
取值
表示到图像边缘的偏移量，在位图中的单位为像素点，在矢量图中则是坐标。对于矢量图， 值与元素大小相关，而非矢量图的原始大小。因此，使用矢量图时，使用百分比值（）更可取。
fill
保留图像的中心区域并将其作为背景图像显示出来，但其会堆叠在 background 之上。它的宽度和高度分别对应顶部和左侧图像切片的宽度和高度。
mdn关于border-image-slice的说明
.box{
width: 600px;
height: 400px;
background-color: rgb(211, 191, 247);
box-sizing: border-box;
border: 30px solid red;
/* border-image: url('./border-diamonds.png') 30 30 round; */
border-image-source: url('./border-diamonds.png'); /* 图片路径 */
border-image-slice: 30; /* 图片裁剪 表明四个方向切割都是30*/
}
.box{
width: 600px;
height: 400px;
background-color: rgb(211, 191, 247);
box-sizing: border-box;
border: 30px solid red;
/* border-image: url('./border-diamonds.png') 30 30 round; */
border-image-source: url('./border-diamonds.png'); /* 图片路径 */
/* border-image-slice: 30 30 30 30; */
/* border-image-slice: 30; 图片裁剪 */
border-image-slice: 30 fill;
}
控制中间部分 border-image-repeat
.box{
width: 600px;
height: 400px;
background-color: rgb(211, 191, 247);
box-sizing: border-box;
border: 30px solid red;
/* border-image: url('./border-diamonds.png') 30 30 round; */
border-image-source: url('./border-diamonds.png'); /* 图片路径 */
/* border-image-slice: 30 30 30 30; */
/* 图片裁剪 和padding margin的使用逻辑一样 默认是像素 可以使用百分比 如果添加fill 会显示中间部分 层级在background-image之上 */
border-image-slice: 30;
/* 图片重复方式
1. 单个值
repeat 平铺图片以填充边框
stretch 拉伸图片以填充边框
round 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像
space 平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围
inherit 继承父级元素的计算值
2. 两个值
第一个值表示水平方向，第二个值表示垂直方向 值和1中的相同
*/
border-image-repeat: round;
}
.box{
width: 600px;
height: 400px;
background-color: rgb(211, 191, 247);
box-sizing: border-box;
border: 30px solid red;
/* border-image: url('./border-diamonds.png') 30 30 round; */
border-image-source: url('./border-diamonds.png'); /* 图片路径 */
/* border-image-slice: 30 30 30 30; */
/* 图片裁剪 和padding margin的使用逻辑一样 默认是像素 可以使用百分比 如果添加fill 会显示中间部分 层级在background-image之上 */
border-image-slice: 30;
/* 图片重复方式
1. 单个值
repeat 平铺图片以填充边框
stretch 拉伸图片以填充边框
round 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像
space 平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围
inherit 继承父级元素的计算值
2. 两个值
第一个值表示水平方向，第二个值表示垂直方向 值和1中的相同
*/
border-image-repeat: round stretch;
}
配置边框渐变
.box{
width: 600px;
height: 400px;
background-color: rgb(211, 191, 247);
box-sizing: border-box;
border: 30px solid red;
/* border-image: url('./border-diamonds.png') 30 30 round; */
/* border-image-source: url('./border-diamonds.png'); 图片路径 */
border-image: linear-gradient(red, blue, green, pink) 27;
/* border-image-slice: 30 30 30 30; */
/* 图片裁剪 和padding margin的使用逻辑一样 默认是像素 可以使用百分比 如果添加fill 会显示中间部分 层级在background-image之上 */
/* border-image-slice: 30; */
/* 图片重复方式
1. 单个值
repeat 平铺图片以填充边框
stretch 拉伸图片以填充边框
round 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像
space 平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围
inherit 继承父级元素的计算值
2. 两个值
第一个值表示水平方向，第二个值表示垂直方向 值和1中的相同
*/
/* border-image-repeat: round stretch; */
}
其余属性
border-image-outset属性定义边框图像可超出边框盒的大小
border-image-width指定了 边界图像 (border image) 的宽度,如果本属性值大于元素的 border-width，边界图像将会向 padding 边缘延展
更多关于border的属性参考mdn