background: radial-gradient([ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> );
属性解析:
ending-shape :渐变结束的形状 默认为椭圆ellipse,可以设置为圆形circle
size:渐变结束形状的大小;默认为最远角
size的值:相较于渐变中心点
closest-side: 与容器最近的一条边相切
closest-corner:与容器最近的一个角相交
farthest-side: 与容器最远的一条边相切
farthest-corner: 与容器最远的一个角相交
一个数字:如果ending-shape指定为圆形时,此值表示半径
两个百分比:ending-shape省略时,表示椭圆的大小,第一个水平半径,第二个垂直半径
position:径向渐变开始的位置,默认是中心点
x/y的坐标
一个值:center、top、 left、bottom、right(另一个纬度默认为50%)
两个值:一个是x坐标,一个是y坐标,可以是关键词,可以像素数,可以是百分比
注意:
1. 只要是left、right就是指定x坐标,top、bottom是指定y坐标,位置不固定
2. 如果是百分比或数字,则第一个是x 第二个是y
3. 如果两个都是数字或百分比,则按照顺序分别为 x或者y
三个值:
1. 前两个值是关键字时,第三个是偏移量
2. 如果第二个值是数字或百分比,则它是第一个值的偏移量,如果是第三个值,则是第二个值的偏移量
3. 一个关键字+2个数字或百分比的组合是无效的
四个值:第一个和第三个是定义xy的关键词,第二个和第四个是偏移量
linear-color-stop: 颜色及结束位置
多个颜色之间用逗号隔开
示例:
1. background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
2. background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
3. background: radial-gradient(ellipse at top, #e66465, transparent), radial-gradient(ellipse at bottom, #4d9f0c, transparent);