- 渐变
渐变(Gradient)是 CSS3 引入的特性,其定义详见 CSS Images Module Level 3。它本质上是一个 2D 图像,可以对 background-image、list-style-image 和 border 等进行细微着色。
- 渐变本身是没有固有尺寸的,虽然渐变框有具体大小
要想指定一个渐变效果,只需定义这三个元素,即可:
- 渐变线(gradient line)
- 渐变线上的起始点(starting point)和结束点(ending point)
- 在起始点和结束点上的颜色值
这样,颜色就会平滑地填充渐变线上的其余部分。
渐变类型,在几何上,可以是:
- 线段(line):对应 CSS 的线性渐变(linear gradient)
- 射线(ray):对应 CSS 的径向渐变(radial gradient)
- 螺旋(spiral):对应 CSS 的圆锥渐变(conic gradient)
类型语法:
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> |
<radial-gradient()> | <repeating-radial-gradient()> |
<conic-gradient()> | <repeating-conic-gradient()>
- 渐变三元素:渐变线、起始点和结束点、颜色序列
语法是:
linear-gradient() = linear-gradient(
[ <angle> | to <side-or-corner> ]?,
<color-stop-list>
)
/*
参1:角度/渐变颜色走向
to top, to right, to bottom, to left,对应到<angle>分别是 0deg, 90deg, 180deg, 270deg
参2:渐变具体颜色 可接收多个颜色
*/
举例: