1、radial-gradient()
原理
CSS radial-gradient()
函数创建一个由原点(渐变中心)辐射开的颜色渐变的图片,边缘形状只能为为circle或者ellipse,其结果属于<gradient>
数据类型,是一种特别的<image>
数据类型。
径向渐变(radial-gradient)由其中心点、边缘形状轮廓及位置、色值的结束点(color-stop)定义。
为了创建平滑的渐变,radial-gradient()函数从中心点到边缘形状以及其延伸部分,是由一系列同心轮廓构成,这个形状由有设定的边缘形状决定。
色值结束点用于设定虚拟渐变射线(virtual gradient ray)的变化方式,由中心点水平变化至右侧(如图)。色值结束点由百分比设定时,则是相对于终点为渐变射线和边缘形状相交点的渐变半径,渐变点半径的终点位置即为100%,每个轮廓均为纯色,颜色由渐变射线上相应横切点所定义的颜色决定。
2、语法
radial-gradient(circle at center, red 0, blue, green 100%)
/* 从元素中心点渐变,起始色为red,渐变到blue,终止色为green*/
形式语法
radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
at <position> ,
]?
<color-stop> [ , <color-stop> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
and <color-stop> = <color> [ <percentage> | <length> ]?
即
background: radial-gradient(shape extend-keyword at position, start-color, ..., last-color);
值
<position>
渐变的<position>
,与background-position
或者transform-origin
类似。如果缺省,则默认为center。
<shape>
渐变的<shape>
,圆形(渐变的形状是一个形状不变的正圆)或者椭圆形(周堆成椭圆)。默认值是椭圆。
<extend-keyword>
即size
渐变的尺寸大小。包含值如下&