css制作花纹边框
使用CSS border-image 属性
通过 border-image 属性可以将图片作为边框应用到元素上。需要准备一张无缝拼接的花纹图片，并设置切片参数和重复方式。
.element {
border: 10px solid transparent;
border-image: url('花纹图片路径') 30 round;
}30表示图片切片距离（像素或百分比）round表示图片平铺方式（还可选repeat或stretch）
使用SVG内联背景
通过SVG代码直接生成花纹背景，结合 background 属性实现边框效果：
.element {
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><pattern id='p' width='10' height='10' patternUnits='userSpaceOnUse'><path d='M0 0 L10 10 M10 0 L0 10' stroke='black'/></pattern><rect fill='url(%23p)' width='100%' height='100%'/></svg>");
padding: 10px; /* 模拟边框宽度 */
}多重盒阴影模拟花纹
利用 box-shadow 的多重阴影特性创建重复图案：
.element {
box-shadow:
0 0 0 5px #000,
0 0 0 10px #f00,
0 0 0 15px #0f0;
position: relative;
}
.element::after {
content: "";
position: absolute;
inset: -20px;
background: repeating-linear-gradient(45deg, transparent, transparent 5px, gold 5px, gold 10px);
z-index: -1;
}伪元素叠加图案
通过伪元素创建可自定义的花纹层：
.element {
position: relative;
border: 2px solid black;
}
.element::before {
content: "";
position: absolute;
inset: -5px;
border: 2px dashed gold;
pointer-events: none;
}渐变背景组合
使用CSS渐变创建几何图案边框：
.element {
padding: 10px;
background:
repeating-linear-gradient(45deg, #ff0000, #ff0000 5px, #0000 5px, #0000 10px),
linear-gradient(to right, white, white);
background-clip: padding-box, content-box;
}使用mask属性
现代浏览器支持通过mask属性创建复杂边框：
.element {
padding: 10px;
background: purple;
-webkit-mask:
repeating-conic-gradient(#0000 0 25%, #000 0 50%)
0 0/20px 20px round;
}注意事项
- 考虑浏览器兼容性，
border-image在IE10及以下需要前缀 - SVG方案具有最佳缩放性
- 复杂花纹建议使用预生成的图片资源
- 现代方案（如mask）需检查Can I Use支持情况
