跳到主要内容

条纹背景

了解渐变属性中的色标，对于 DRY 非常有益。

在渐变中，色标后面通常会紧跟色标的位置。假如有两个色标，绿色和红色，色标位置分别为 m、n，表示从 0%到 m 的区域为绿色，n 到 100%的区域为红色，中间 m 到 n 的区域为绿色转变为红色的过渡区域。

div {
  background: linear-gradient(to right, green 20%, red 70%);
  width: 200px;
  height: 200px;
}

情景 1：如果 m 和 n 相等，会产生一个无限小的过渡区域，在视觉上，是绿色突变到红色。

div {
  background: linear-gradient(to right, green 20%, red 20%);
  width: 200px;
  height: 200px;
}

情景 2：如果 m 没写，n 到 100%的区域仍然为红色，0% 到 n 为过渡区间。

div {
  background: linear-gradient(to right, green, red 70%);
  width: 200px;
  height: 200px;
}

情景 3：如果 n 没写，0% 到 m 的区域仍然为绿色，m 到 100% 为过渡区间。

div {
  background: linear-gradient(to right, green 20%, red);
  width: 200px;
  height: 200px;
}

情景 4：如果 n 小于 m ，则把 n 重置为 m，效果等同于情景 1。

div {
  background: linear-gradient(to right, green 20%, red 10%);
  width: 200px;
  height: 200px;
}

提示

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

情景 5：如果有三个色标，只有中间第二个色标没有写位置，其色标则位于相邻的两个色标的中间。

水平条纹​

div {
  width: 200px;
  height: 200px;
  background: linear-gradient(darkgreen 50%, darkorange 0);
  background-size: 100% 20px;
}

垂直条纹​

div {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, darkgreen 50%, darkorange 0);
  background-size: 20px 100%;
}

斜向条纹​

45 度斜纹

linear-gradient 如果设置了渐变角度 0deg，渐变方向则是从下往上，可以想象为指向 0 点的时针。deg 如果是正数，则顺时针调整渐变角度，负数则是逆时针调整渐变角度。

div {
  width: 200px;
  height: 200px;
  background: linear-gradient(
    45deg,
    darkgreen 25%,
    darkorange 0,
    darkorange 50%,
    darkgreen 0,
    darkgreen 75%,
    darkorange 0
  );
  background-size: 20px 20px;
}

更好的斜向条纹​

使用repeating-linear-gradient属性，将渐变不断重复。

45 度斜纹

div {
  width: 200px;
  height: 200px;
  background: repeating-linear-gradient(
    45deg,
    darkgreen,
    darkgreen 15px,
    darkorange 0,
    darkorange 30px
  );
}

注意高亮部分的darkgreen,和darkorange 30px，一个在头部，一个在尾部，既然是重复渐变，需要头尾衔接，这两个色标不能丢。

将 45 度改为 60 度，即实现了 60 度斜纹。

div {
  width: 200px;
  height: 200px;
  background: repeating-linear-gradient(
    60deg,
    darkgreen,
    darkgreen 15px,
    darkorange 0,
    darkorange 30px
  );
}

灵活的同色系条纹​

上面的那些条纹太刺眼了，大多数情况下使用的是同色系的条纹。以主色为背景色，加上半透明的斜纹。

div {
  width: 200px;
  height: 200px;
  background:darkgreen,
  background-image: repeating-linear-gradient(
    45deg,
    hsla(0,0%,100%,.1),
    hsla(0,0%,100%,.1) 15px,
    transparent 0,
    transparent 30px
  );
}