咨询电话:
15628812133
16
2017/03

css3实现圆角边框渐变

发布时间:2017-03-16 18:18:58
发布者:jinchao
浏览量:
0

渐变的形式:可选参数 有两种方式-

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;}

2016010615380177.jpg

关键词:
返回列表