当前位置：首页 > CSS

css制作花纹边框

2026-04-01 20:54:11CSS

使用 `border-image` 属性

通过 border-image 属性可以直接将图片设置为边框花纹。需要准备一张可平铺的花纹图片，并定义切片和重复方式。

.element {
  border: 10px solid transparent;
  border-image: url('border-pattern.png') 30 round;
}

30 表示图片切片宽度（像素或百分比）。
round 表示平铺方式（还可选 repeat 或 stretch）。

使用 `background` 和伪元素

通过背景渐变或图案生成花纹，结合伪元素实现边框效果。

css制作花纹边框

.element {
  position: relative;
  background: linear-gradient(45deg, #ff0, #f0f);
  padding: 10px;
}
.element::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('pattern.png');
  padding: 10px;
  z-index: -1;
}

伪元素覆盖在父元素上，通过 inset: 0 撑满空间。
z-index: -1 确保内容显示在花纹上方。

使用 SVG 图案

通过 SVG 定义可重复的花纹图案，作为边框背景。

<svg width="100%" height="100%">
  <pattern id="pattern" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="5" fill="#f06"/>
  </pattern>
  <rect width="100%" height="100%" fill="url(#pattern)"/>
</svg>

在 CSS 中引用 SVG 图案：

css制作花纹边框

.element {
  border: 10px solid transparent;
  background: url('data:image/svg+xml;utf8,<svg ...></svg>');
}

使用 `box-shadow` 模拟边框

通过多层 box-shadow 叠加实现复杂花纹效果。

.element {
  box-shadow: 
    0 0 0 5px #ff0,
    0 0 0 10px #f0f,
    0 0 0 15px #0ff;
}

每层阴影的扩散半径逐渐增大，形成多色边框。

结合 CSS 渐变和遮罩

使用 mask 或 clip-path 裁剪出花纹边框区域。

.element {
  background: linear-gradient(45deg, #ff0, #f0f);
  padding: 10px;
  -webkit-mask: 
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
}