径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。
当我们为一个渐变设置多个颜色时，它们会平分这个100%的区域来渐变。当然除了百分比，我们也可以使用具体的像素来设置这个大小。像素设置的大小指的是从渐变圆心向外延伸的距离。
语法：
background: radial-gradient( [ circle || <length> ] [ at <position> ]? ,| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,| at <position> ,<color-stop> [ , <color-stop> ]+ )
position：如缺少，默认为中心点。
-
shape：渐变的形状。圆形或椭圆形。默认值为椭圆。
-
size：渐变的尺寸大小。
-
color-stop：表示某个确定位置的固定色值。<color>值加上可选的位置值。百分比值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%)
白色的背景上这个半圆是全透明的，所以，背景位置变化这个半圆的穿透效果依然不会变。
网友评论