应用视觉设计-优雅的颜色渐变

颜色渐变

• 背景色并不局限于单色，CSS 还提供了颜色过渡，也就是渐变
• background里使用linear-gradient()来实现线性渐变
• 下面是它的语法：

background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);

• 第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：

举个栗子：

div {
  border-radius: 20px;
  width: 80%;
  height: 100px;
  margin: 50px auto;
  background: linear-gradient(35deg, #ccffff, #ffcccc, rgb(204, 204, 255));
}

效果如下

线性渐变条纹

• repeating-linear-gradient()函数和linear-gradient()很像，主要区别是repeating-linear-gradient()重复指定的渐变。
• repeating-linear-gradient()有很多参数，此处只介绍角度值和起止渐变颜色值
• 角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。

举个栗子：

iv {
  border-radius: 20px;
  width: 70%;
  height: 400px;
  margin: 50 auto;
  background: repeating-linear-gradient(
    45deg,
    yellow 0px,
    yellow 40px,
    black 40px,
    black 80px
  );
}

• 渐变开始于 0 像素位置的yellow，然后过渡到距离开始位置 40 像素的yellow
• 由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值black，然后过渡到距离开始位置 80 像素的red。
• 理解它是如何过渡的–
• 0px [黄色 -- 过渡 -- 黄色] 40px [黑色 -- 过渡 -- 黑色] 80px
• 如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。