gradient
线性渐变
线性渐变沿着一条假想线逐渐过渡颜色。
文档
developer.mozilla.org/zh-CN/docs/…
语法
linear-gradient(
[ <angle> | to <side-or-corner> [, <color-stop>]+
]?
[, <color-stop>]+
)
示例
linear-gradient(red, blue);
/* 角度 */
linear-gradient(0deg, red, blue);
linear-gradient(90deg, red, blue);
/* 方向 */
linear-gradient(to right, red, blue);
linear-gradient(to bottom left, red, blue);
径向渐变
径向渐变从一个中心点（原点）逐步过渡颜色。
文档
developer.mozilla.org/zh-CN/docs/…
语法
radial-gradient(
[ circle | ellipse ]? [ at <position> | <circle> ]? ,
<color-stop> [, <color-stop>]+
)
示例
radial-gradient(red, blue);
/* 形状 */
radial-gradient(circle, red, blue);
radial-gradient(ellipse, red, blue);
/* 位置 */
radial-gradient(circle at bottom, red, blue);
radial-gradient(circle at bottom right, red, blue);
/* 大小 */
radial-gradient(50px circle at top, red, blue);
radial-gradient(300px circle at bottom right, red, blue);
锥形渐变
锥形渐变是在一个圆周上逐步过渡颜色。
文档
developer.mozilla.org/zh-CN/docs/…
语法
conic-gradient(
[ from <angle> | at <position> ]? ,
<color-stop> [, <color-stop>]+
)
示例
conic-gradient(red, blue);
conic-gradient(from 90deg, red, blue);
conic-gradient(from 90deg at 10% 10%, red, blue);
