css3学习--background-渐变

文章参考

http://www.zhangxinxu.com/wordpress/?p=727

http://www.uqu8.com/html/2014/html-css_1105/176.html

background: -moz-linear-gradient(top, blue, white);//-webkit-linear-gradient(top, blue, white)谷歌

线性渐变，逆时针方向，-moz-火狐浏览器，top为方向，blue为起点颜色，white为结束颜色

从top开始从left开始

 

linear-gradient(blue, white);

linear-gradient(top, blue, white);

linear-gradient(bottom, white, blue);

linear-gradient(-90deg, white, blue); 

以上四种方式都能实现左图

background: -moz-linear-gradient(left top, blue, white);//谷歌改前缀

从左上角开始

background: -moz-linear-gradient(left center, black, white);
background: -moz-linear-gradient(left 20deg, black, white);

从left/left_center开始从left_20°开始

 left_0°=========left_20°=========left_30°=========left_50°=========left_70°=========left_90°

0°==20°==30°==50°==70°==90°

如果没有指定位置，颜色会均匀分布

第一张图写法为background: -moz-linear-gradient(left, black 80%, white);
第二张图写法为background: -moz-linear-gradient(left, black, white 80%);
第三张图写法为background: -moz-linear-gradient(left, white 80%, black);

---------------------------------透明度---------------------------------------------

background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://p0.so.qhimg.com/bdr/_240_/t010f1e95f5a2025c85.jpg);
background: -moz-linear-gradient(right, rgba(255,0,0,0.4), rgba(255,255,255,1)),url(http://p0.so.qhimg.com/bdr/_240_/t010f1e95f5a2025c85.jpg);
background: -moz-linear-gradient(left, rgba(255,0,0,0.4), rgba(255,255,255,1)),url(http://p0.so.qhimg.com/bdr/_240_/t010f1e95f5a2025c85.jpg);

rgba(r,g,b,a)==>a表示不透明度，透明度越大，作用对象越清楚

rgba(255,255,255,0)表示颜色(255,255,255)的白色，0表示白色的遮盖层本身不透明度为0即很透明
rgba(255,255,255,1)表示颜色(255,255,255)的白色，1表示白色的遮盖层本身不透明度为1即很不透明

（好像有点绕，我把它理解为0表示否，否定不透明度中的“不透明”这几个字，1表示是，肯定不透明度中的“不透明”这几个字）

left和right表示startColor到endColor的方向

---------------------------------径向渐变之颜色---------------------------------------------

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 70%);

 下面的圆具有相同的起止颜色，但在左边的为默认的颜色间隔均匀的渐变，而右边的每种颜色都有特定的位置。

---------------------------------径向渐变之形状-----------------------------------------------

background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);

一个圆（左侧）和椭圆（右侧）bottom left和left bottom都可以表示左下角

---------------------------------径向渐变之大小-----------------------------------------------

size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点

大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）

---近边和远角--

background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white)；
background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

左边的一个是近边：从起始点(center)到近边的距离，而右边的一个是远角：从起始点到远角的的距离。

(图片来自网络)

---近边和远边--

background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

左边的圆的渐变半径：起始点(center)到近边的距离，而右边的圆的渐变半径：起始点到远边的距离。