css3渐变详解

今天总结渐变的问题,渐变分为线性渐变、径向渐变。呼呼,废话少说,

线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色);

Linear:渐变的类型(线性渐变);

渐变的形式:可选参数 有两种方式-1、设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换。

2、使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbottom,righttop,rightbottom。

中间颜色与中间颜色位置为可选参数。

不过要考虑浏览器的兼容,咱们这样写:

-webkit-gradient(linear,0  0,0  100%,from(起始颜色,to(结束颜色));  /*for Safari4+,Chrome 2+*/

-webkit-linear-gradient(起始颜色, 结束颜色);  /*for Safari 5.1+,Chrome 10+*/

-moz-linear-gradient(起始颜色, 结束颜色);  /*for firefox*/

-o-linear-gradient(起始颜色, 结束颜色);  /*Opera*/

linear-gradient(起始颜色, 结束颜色);  /*标准属性*/

对于IE来说是个麻烦事,老办法

Filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’ 起始颜色’,endColorstr=” 结束颜色”);  /*IE6,IE 7*/

-ms-linear-gradient(起始颜色, 结束颜色);  /*IE8*/

<div class="content1"></div>

.content1{width:500px;height:300px;border-radius:10%;background:#ade691;
background:-webkit-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:-moz-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#88cfc3‘, endColorstr=‘#096e5d‘); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#88cfc3‘, endColorstr=‘#096e5d‘)";background:linear-gradient(lleft,#88cfc3,#329e8c 30%,#096e5d;float:left;}
.tit1{font-size:3em;font-weight: bold;color:#f00;}

重复性线性渐变:repeating-linear-gradient属性来代替线性渐变linear-gradient;

<div class="content2"></div>

.content2{width:500px;height:200px;
background-image: -webkit-repeating-linear-gradient(red,green 40px, orange 80px);
background-image: repeating-linear-gradient(red,green 40px, orange 80px);}

 

 

径向渐变radial-gradient(设置渐变的中心,渐变形状 渐变大小,起始颜色值,中间颜色值 中间颜色位置,终点颜色)

渐变中心,可选参数,如30px 20px指距离左侧30px距离上侧20px,可以是像素,可以是百分比,也可以是关键字,默认为中心位置。

渐变形状,可选参数,可以取值circle或eclipse【默认】

渐变大小,可循环参数,可以取值

closest-side

指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner

指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side

指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner

指定径向渐变的半径长度为从圆心到离圆心最远的角

contain

包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side

cover

覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

 circle farthest-corner圆形渐变,ellipse farthest-corner椭圆渐变

<div class="content3"></div>

.content3{width:500px;height:200px;
background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));margin-top:20px;}

对于css3渐变还在更深研究中~~

如有问题,请提出,谢谢,(*^__^*) 嘻嘻……

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。