当前位置：首页 > CSS

css条纹制作

2026-02-27 07:04:03CSS

使用线性渐变制作条纹

在CSS中，线性渐变是创建条纹背景的常用方法。通过设置多个颜色停止点，可以生成水平、垂直或对角条纹。

background: linear-gradient(to right, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%);

这个例子创建了红蓝相间的水平条纹。to right指定渐变方向，50%的位置设置颜色变化点形成条纹边界。

调整条纹宽度和重复

通过调整渐变中的百分比值，可以控制条纹的宽度比例。使用background-size属性可以创建重复的条纹图案。

background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%);
background-size: 50px 50px;

这段代码生成了45度角的斜条纹，每个条纹单元大小为50x50像素。

使用repeating-linear-gradient

CSS的repeating-linear-gradient函数专门用于创建重复条纹图案，无需单独设置background-size。

background: repeating-linear-gradient(
    0deg,
    #fff,
    #fff 10px,
    #000 10px,
    #000 20px
);

这个例子创建了垂直的黑白条纹，每条高度为10px。

创建复杂条纹图案

通过组合多个渐变可以创建更复杂的条纹效果。使用多层背景时，注意声明顺序会影响叠加效果。

background: 
    linear-gradient(90deg, rgba(255,0,0,0.5) 50%, transparent 50%),
    linear-gradient(rgba(0,0,255,0.5) 50%, transparent 50%);
background-size: 30px 30px;

这段代码生成了半透明的红蓝网格条纹效果。

浏览器兼容性考虑

现代浏览器都支持CSS渐变，但对于老旧浏览器可能需要添加前缀：

css条纹制作

background: -webkit-linear-gradient(left, #ccc, #ccc 50%, #eee 50%);
background: -moz-linear-gradient(left, #ccc, #ccc 50%, #eee 50%);
background: linear-gradient(to right, #ccc, #ccc 50%, #eee 50%);

始终将标准语法放在最后，确保现代浏览器优先使用标准属性。