CSS3 渐变属性（Gradients）-径向渐变（radial-gradient）

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。

---

当我们为一个渐变设置多个颜色时，它们会平分这个100%的区域来渐变。当然除了百分比，我们也可以使用具体的像素来设置这个大小。像素设置的大小指的是从渐变圆心向外延伸的距离。

语法：
background: radial-gradient( [ circle || ] [ at ]? ,| [ ellipse || [ | ]{2}] [ at ]? ,| [ [ circle | ellipse ] || ] [ at ]? ,| at , [ , ]+ )

• position：如缺少，默认为中心点。

  
  
  

• shape：渐变的形状。圆形或椭圆形。默认值为椭圆。

  
  
  

• size：渐变的尺寸大小。

  
  
  
  
  
  

• color-stop：表示某个确定位置的固定色值。值加上可选的位置值。百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。

  
  
  

• extent-keyword：关键字用于描述边缘轮廓的具体位置。以下为关键字常量：

  
  
  
  
  
  

举栗子
1.radial-gradient( #0FF 100%, #00F)
2.radial-gradient( #0FF, #00F 0%)
这两个效果有什么不同呢？

颜色的分布是从0%（渐变圆心）的位置到100%的位置的（100%的位置也就是渐变的半径），默认情况下，第一个颜色的位置是0%，最后一个颜色是100%。超出这个范围的用距离最近的颜色来填充。
1.在第一个例子中，#0FF设置了100%，所以它的颜色是从最外面的边框往外蔓延，所以框里就没有颜色了，于是就用靠近的颜色 #0FF来填充，所以，最后框里的颜色还是它。
2.在第二个例子中，#00F设置成了0%，于是#0FF就变成了 0%-0%，无法填充，所以从 #00F 开始填充 0%-100%。所以是深蓝色的。

实现一个穿透效果的圆

radial-gradient(500px 500px at 50% 0px, transparent 0%, transparent 50px,#fff 50px, #fff 100%)

白色的背景上这个半圆是全透明的，所以，背景位置变化这个半圆的穿透效果依然不会变。