渐变的形式:可选参数 有两种方式-
1、设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换。
2、使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbottom,righttop,rightbottom。,中间颜色与中间颜色位置为可选参数。
今天文汇小编就给大家分享一下css3实现与那叫边框渐变,首先先建一个button,
先把代码写出来不要考虑浏览器兼容问题,
-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*/
.border{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'); -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;}
上一篇: Web前端的学习误区