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.
使用例子
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 一起使用。
有趣例子/深入理解
- https://projects.verou.me/css3patterns/
- http://standardista.com/cssgradients/
- https://cssgenerator.org/gradient-css-generator.html
- https://cssgradient.io/blog/css-gradient-examples/
- https://kittygiraudel.com/2013/02/04/dig-deep-into-css-gradients/
- https://www.bram.us/2021/10/13/how-to-create-the-stripe-website-gradient-effect/
- https://whatamesh.vercel.app/ 生成动画渐变效果