CSS3高级特性之径向渐变

一 语法

background-image:radial-gradient(position,shape size,start-color, color,..

1 position 渐变中心位置

值有center，top left（左上角），topright（右上角），bottom left（左下角），bottom right（右下角）；也可以采用百分比（x轴 y轴）进行定位；默认值为center

2 shape 定义渐变形状

值有circle（圆）和ellipse（椭圆），默认值为cllipse

3 size 渐变形状大小

有四个值closest-side，farthest-side，closest-corner，farthest-corner，默认值为closest-side

4 start-color, color,..

渐变颜色，可以为多种颜色，每种颜色后可用百分比定义渐变宽度

二 举例说明

1 background:-webkit-radial-gradient(center,#F00,#9F0,#06F);

设置了渐变起始位置为中心，默认渐变形状为椭圆

2 background: -webkit-radial-gradient(40px40px,circle,#F00,#9F0,#06F);

利用px数值设置中心定位的渐变，形状为圆形

3 background: -webkit-radial-gradient(20%20%,circle,#F00,#9F0,#06F);

利用百分比设置渐变中心的位置，渐变形状设置为圆形

4 background: -webkit-radial-gradient(50%50%,circle,#F00,#9F0,#06F);

利用百分比将渐变中心设置在容器中心位置，渐变形状设置为圆形

5 background:-webkit-radial-gradient(center,circle,#F00,#9F0,#06F);

利用center设置渐变位置为中心，渐变形状为圆形

6 background:-webkit-radial-gradient(center,circle closest-side,#F00,#9F0,#06F);

设置形状为圆形的大小为closest-side的渐变

7 background:-webkit-radial-gradient(center,circle farthest-side,#F00,#9F0,#06F);

设置形状为圆形的大小为farthest-side的渐变

8 background:-webkit-radial-gradient(center,circle closest-corner,#F00,#9F0,#06F);

设置形状为圆形的大小为closest-corner的渐变

9 background:-webkit-radial-gradient(center,circle farthest-corner,#F00,#9F0,#06F);

设置形状为圆形的大小为farthest-corner的渐变