CSS3 学习+实践（三）

CSS3基本属性Gradient----渐变

现代浏览器的内核，主流内容主要有Mozilla（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。

根据不同的内核，一些私有属性的css前缀不一样 

Mozilla内核　　 css前缀-moz;

WebKit内核　　css前缀-webkit ;  

Opera 内核 　　css前缀 -o ;

Trident内核　　css前缀 -ms ;   

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。渐变一般是用来设置背景的-- background属性。

线性渐变: 是指从左到右、从右到左渐变或者从上到下、从下到上渐变。

径向渐变: 是指以某点为圆心根据指定的直径数实现的渐变。

linear-gradient(A,B,C) 线性渐变的参数 　A :角度或者left、top, 即给定一个渐变的角度； 左表示从左到右渐变；上表示从上到下渐变

　　　　　　　　　　　　　　　　　　　  B: 起始处的渐变颜色；  C: 终止处的渐变颜色

线性渐变在webkit下的应用：

   　　　　 

在Mozilla和在Opera下只需要换个前缀就可以

在Trident下需要通过滤镜filter才能实现。

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/ 

startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。

在Mozilla，Opera，webkit中方向也可以设置为左上到右下的渐变。

       

也可以设置渐变的颜色多样化：

     

以及渐变的颜色的宽度

     

角度：

如果不指定一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，这时就可以设置角度。

当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变

 

  角度以逆时针方向转动

 

 渐变上应用透明─透明度(Transparency)：

CSS3的径向渐变:

径向渐变到目前还不支持Opera的内核浏览器 

radial-gradient :   radial-gradient([方向或角度,]? [形状或大小,]? 颜色1,  颜色2[,  颜色3]*);

除了在线性渐变中看到的起始位置，方向，和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点.

在径向渐变中虽然具有相同的起止色，但是在没有设置位置时，其默认颜色为均匀间隔，这一点和我们前面的线性渐变是一样的，但是设置了渐变位置就会按照渐变位置去渐变

      

 

注意：当你的div为正方形大小时，就算设置渐变形状为ellipse，它的渐变形状也只能按照circle来进行渐变。不能继续椭圆形渐变。

size:用来指定起始点(center)到圆|椭圆的近边的距离设定的，或从起始点到圆|椭圆远角的的距离决定的。