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
渐变的尺寸大小。包含值如下:
值 | 描述 |
---|---|
closest-side | 指定渐变的半径长度为从圆心到离圆形最近的边(圆形)或者垂直和水平离中心最近(椭圆) |
closest-corner | 指定渐变的半径长度为从圆形到离圆心最近的角 |
farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
farthest-corner | 指定径向渐变的半径长度为从圆心到离圆心最远的角 |
<color-stop>
表示某个确定位置的固定色值,包含一个<color>
值加上可选的位置值(相对虚拟渐变射线的<percentage>
或者<length>
长度值)。百分比值为0%或者长度值为0表示渐变中心;百分比为100%表示渐变射线与边缘形状相交的点。期间的百分比值线性对应渐变射线上的点。
3、浏览器兼容性
浏览器支持
兼容写法
background: -webkit-radial-gradient(circle farthest-side at center,red,blue);/* Safari 5.1-6.0 */
background: -o-radial-gradient(circle farthest-side at center,red,blue); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(circle farthest-side at center,red,blue);/* Firefox 3.6-15 */
background: radial-gradient(circle farthest-side at center,red,blue);/* 标准语法 */
4、尝试
示例1
background: radial-gradient(cyan 0%,transparent 20%,salmon 40%);
示例2
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid rgba(255,255,255,0.6);
background: radial-gradient(circle,#fff 30%,transparent 0),#00caf5;
background-size: 30px 30px;
示例3
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid rgba(255,255,255,0.6);
background: radial-gradient(circle,#fff 30%,transparent 0) 0 0,
radial-gradient(circle,#fff 30%,transparent 0) 15px 15px,
#00caf5;
background-size: 30px 30px;
示例4
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #00caf5;
box-shadow: 0 0 0 10px rgba(255,255,255,0.8) inset;
background: radial-gradient(circle,#00caf5 9px,transparent 10px),
repeating-radial-gradient(ellipse,#00caf5 0,#00caf5 4px,transparent 5px,transparent 20px,#00caf5 21px,#00caf5 25px,transparent 26px, transparent 50px),
#fff;
background-size: 30px 30px,90px 90px;
示例5
background: radial-gradient(#00caf7 4%, #00b7e0 9%, rgba(0, 187, 229, 0) 9%) 0 0,
radial-gradient(#00caf7 4%, #00b7e0 8%, rgba(0, 187, 229, 0) 10%) 50px 50px,
radial-gradient(rgba(0, 208, 255, 0.8) 20%, rgba(0, 187, 229, 0)) 50px 0,
radial-gradient(rgba(0, 208, 255, 0.8) 20%, rgba(0, 187, 229, 0)) 0 50px,
radial-gradient(rgba(0, 187, 229, 1) 35%, rgba(0, 187, 229, 0) 60%) 50px 0,
radial-gradient(rgba(0, 187, 229, 1) 35%, rgba(0, 187, 229, 0) 60%) 100px 50px,
radial-gradient(rgba(0, 177, 217, 0.7), rgba(0, 187, 229, 0)) 0 0,
radial-gradient(rgba(0, 177, 217, 0.7), rgba(0, 187, 229, 0)) 50px 50px,
linear-gradient(45deg, rgba(0, 187, 229, 0) 49%, #0092b3 50%, rgba(0, 187, 229, 0) 70%) 0 0,
linear-gradient(-45deg, rgba(0, 187, 229, 0) 49%, #0092b3 50%, rgba(0, 187, 229, 0) 70%) 0 0,
#00bbe5;
background-size: 100px 100px;
本文示例部分参考自:
http://lea.verou.me/css3patterns/#