当前位置：首页 > CSS

css条纹边框制作

2026-01-28 15:43:56CSS

使用 `linear-gradient` 制作条纹边框

通过 CSS 的 linear-gradient 背景渐变可以创建条纹效果。将背景设置为重复的渐变条纹，并通过 padding 和 background-clip 控制边框区域。

.striped-border {
  padding: 10px;
  background: 
    linear-gradient(45deg, #ff0000 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(-45deg, #ff0000 25%, transparent 25%) 0 0 / 20px 20px;
  background-clip: padding-box;
}

使用 `border-image` 实现条纹边框

border-image 属性允许将图片或渐变作为边框。结合 linear-gradient 可生成条纹边框。

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

使用伪元素叠加条纹

通过 ::before 或 ::after 伪元素生成条纹层，定位到边框区域。

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

使用 SVG 背景图案

通过 SVG 生成条纹图案，设为背景实现边框效果。

css条纹边框制作

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

调整条纹样式参数

修改 linear-gradient 的角度（如 45deg）可改变条纹方向。
调整颜色值和间距（如 5px）可自定义条纹宽度和颜色组合。
通过 background-size 控制条纹密度。

/* 水平条纹示例 */
.horizontal-stripes {
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(0deg, #ff0000, #ff0000 5px, #0000ff 5px, #0000ff 10px) 10;
}