Tianhe Gao

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.

使用例子

 1linear-gradient(
 2      217deg,
 3      rgba(255, 0, 0, 0.6),
 4      rgba(255, 0, 0, 0) 66%
 5    ),
 6    linear-gradient(127deg, rgba(0, 255, 0, 0.6), rgba(0, 255, 0, 0) 66%),
 7    linear-gradient(336deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0) 66%)
 8
 9linear-gradient(to left top, rgba(111, 222, 255, .6), rgba(222, 111, 255, .6))
10
11linear-gradient(0deg, blue, green 40%, red)
12
13linear-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 一起使用。

No notes link to this note

Welcome to tell me your thoughts via "email"
UP