CSS 渐变

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

使用例子

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.6),
      rgba(255, 0, 0, 0) 66%
    ),
    linear-gradient(127deg, rgba(0, 255, 0, 0.6), rgba(0, 255, 0, 0) 66%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0) 66%)

linear-gradient(to left top, rgba(111, 222, 255, .6), rgba(222, 111, 255, .6))

linear-gradient(0deg, blue, green 40%, red)

linear-gradient(.25turn, red, 10%, blue)

疑问

MDN 中的这句话是不是有问题?

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.

经过测试,没有问题。background-color 确实无法和 linear-gradient() 一起使用。但是,可以和 background 一起使用。

Layout of comment panels