当前位置：首页 > CSS

css条纹边框制作

2026-04-01 18:58:19CSS

使用线性渐变（linear-gradient）

通过CSS的linear-gradient可以创建条纹边框效果。定义一个背景为渐变的元素，并调整角度和颜色分布实现条纹。

.striped-border {
  border: 10px solid transparent;
  background: linear-gradient(45deg, #ff0000 25%, #0000ff 25%, #0000ff 50%, #ff0000 50%, #ff0000 75%, #0000ff 75%);
  background-size: 20px 20px;
}

使用重复线性渐变（repeating-linear-gradient）

repeating-linear-gradient更适合创建重复的条纹效果，无需手动计算背景尺寸。

.striped-border {
  border: 10px solid transparent;
  background: repeating-linear-gradient(45deg, #ff0000, #ff0000 10px, #0000ff 10px, #0000ff 20px);
}

边框图像（border-image）

利用border-image属性直接为边框指定条纹图案，需配合border-image-slice和border-image-repeat。

.striped-border {
  border: 10px solid;
  border-image: repeating-linear-gradient(45deg, #ff0000, #0000ff 20px) 10;
}

伪元素叠加

通过伪元素（如::before或::after）生成条纹背景，并调整位置和尺寸模拟边框效果。

.striped-border {
  position: relative;
  padding: 20px;
}
.striped-border::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: repeating-linear-gradient(90deg, #ff0000, #0000ff 10px);
  z-index: -1;
}

SVG背景

使用SVG生成条纹图案，通过CSS的background-image引入，适合复杂条纹需求。

css条纹边框制作

.striped-border {
  border: 10px solid transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect width='10' height='20' fill='%23ff0000'/><rect x='10' width='10' height='20' fill='%230000ff'/></svg>");
  background-size: 20px 20px;
}