如何使用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