关于CSS中的径向渐变(部分)

径向渐变

什么是径向渐变？

• 径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。

用法：

• background-image: radial-gradient();
• radial（adj. 辐射状的；中心区域的；径向；放射状的）
• gradient（n. 梯度，陡度；adj. 倾斜的 网络. 渐变）
  
  加上参数即可使用：
• background-image: radial-gradient( #E94E65, #1574A8);
• 上述代码会在元素的显示范围内创建一个椭圆形，把渐变的中心点（红色）放在元素的中心上。

拓展1：

• 我们还可以在颜色值前面加上 circle 关键字，创建圆形的渐变。
• background-image: radial-gradient( circle, #E94E65, #1574A8);
  
  拓展2：设置径向渐变的中心点
• 可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值，指定渐变中心的位置,设置在元素的左上方（20% 20%）
• background-image: radial-gradient( circle at 20% 20%, #E94E65, #1574A8);