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;
}

注意事项

1. 考虑浏览器兼容性，border-image 在IE10及以下需要前缀
2. SVG方案具有最佳缩放性
3. 复杂花纹建议使用预生成的图片资源
4. 现代方案（如mask）需检查Can I Use支持情况