css条纹制作
CSS 条纹制作方法
水平条纹
使用 linear-gradient 可以轻松创建水平条纹。通过设置多个颜色停止点，并让它们紧邻彼此，可以形成条纹效果。
.striped {
background: linear-gradient(
to bottom,
#ff0000 0%,
#ff0000 50%,
#0000ff 50%,
#0000ff 100%
);
}垂直条纹
将渐变方向改为 to right 即可创建垂直条纹。
.striped {
background: linear-gradient(
to right,
#ff0000 0%,
#ff0000 50%,
#0000ff 50%,
#0000ff 100%
);
}斜向条纹 通过调整渐变角度可以实现斜向条纹效果。角度值决定了条纹的倾斜方向。
.striped {
background: linear-gradient(
45deg,
#ff0000 0%,
#ff0000 50%,
#0000ff 50%,
#0000ff 100%
);
}多色条纹 增加颜色停止点可以创建包含多种颜色的条纹。
.striped {
background: linear-gradient(
to bottom,
#ff0000 0%,
#ff0000 25%,
#00ff00 25%,
#00ff00 50%,
#0000ff 50%,
#0000ff 75%,
#ffff00 75%,
#ffff00 100%
);
}重复条纹
使用 repeating-linear-gradient 可以创建重复的条纹图案，特别适合需要无缝拼接的场景。
.striped {
background: repeating-linear-gradient(
45deg,
#ff0000,
#ff0000 10px,
#0000ff 10px,
#0000ff 20px
);
}注意事项
- 条纹宽度通过颜色停止点的百分比或固定值控制
- 渐变方向影响条纹走向
- 使用透明色可以创建半透明条纹效果
- 考虑添加
background-size属性控制重复图案的尺寸
