css制作条纹
使用 linear-gradient 制作条纹背景
CSS 的 linear-gradient 函数可以创建条纹效果。通过设置色标位置和重复渐变，可以生成水平、垂直或对角条纹。
background: linear-gradient(45deg, #000 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #fff 75%);
background-size: 100px 100px;使用 repeating-linear-gradient 制作重复条纹
repeating-linear-gradient 专门用于创建重复的条纹图案，无需手动计算背景尺寸。
background: repeating-linear-gradient(
90deg,
#ff0000,
#ff0000 10px,
#0000ff 10px,
#0000ff 20px
);创建垂直条纹
将渐变角度设置为 0deg 或 180deg 可以创建垂直条纹。
background: repeating-linear-gradient(
0deg,
#333,
#333 10px,
#eee 10px,
#eee 20px
);创建对角条纹
通过设置 45deg 或类似角度可以创建对角条纹效果。
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);使用 background-size 控制条纹密度
通过调整 background-size 可以改变条纹的间距和粗细。
background: linear-gradient(90deg, #000 50%, #fff 50%);
background-size: 30px 100%;多颜色条纹效果
在渐变中添加多个色标可以创建多色条纹。
background: repeating-linear-gradient(
90deg,
red,
red 10px,
blue 10px,
blue 20px,
green 20px,
green 30px
);斑马条纹表格
使用 nth-child 选择器为表格行添加交替条纹。
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #fff;
}使用 SVG 创建复杂条纹
对于更复杂的条纹图案，可以使用 SVG 作为背景图像。
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="10" height="20" fill="%23000"/><rect x="10" width="10" height="20" fill="%23fff"/></svg>');
