css渐变色（2）

目录：

1线性渐变

2径向渐变

昨天我们讲的是线性渐变，今天我们来说一说径向渐变

使用表示方位的单词
to top 表示从下往上的方式进行渐变
to bottom 表示从上往下的方式进行渐变
to right 表示从左往右的方式进行渐变
to left 表示从右往左的方式进行渐变
to top left 表示从右下向左上进行渐变(top和left可以交换位置，下同)
to top right 表示从左下向右上进行渐变
to bottom left 表示从右上向左下进行渐变
to bottom right 表示从左上向右下进行渐变
使用角度表示，例如0deg等同于to top， 90deg等同于to right
使用弧度，单位为rad
使用turn，代表环绕圆圈的圈数，0.5turn表示半圈，也就是180deg
使用grad，表示百分度，400grad表示360deg

径向渐变使用radial-gradient，语法和linear-gradient基本一致，并且同样有repeating-radial-gradient用来重复设置。

 

background-image: radial-gradient(red, green);

默认是呈椭圆形扩散，但是可以通过设置circle转为圆形。