css3倒圆角边框,css3实现圆角边框渐变

原标题：css3实现圆角边框渐变

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

1、设置旋转角度，0度代表水平从左到右，90度就是从上到下啦，从0度开始逆时针变换。

2、使用关键字，left代表从左到右，top代表从上到下，同理right就是从右到左，lefttop-从坐上到右下，同理leftbottom，righttop，rightbottom。，中间颜色与中间颜色位置为可选参数。

今天文汇小编就给大家分享一下css3实现与那叫边框渐变，首先先建一个button，

先把代码写出来不要考虑浏览器兼容问题，

-webkit-gradient(linear,0 0,0 100%,from(起始颜色,to(结束颜色))； -webkit-linear-gradient(起始颜色, 结束颜色)；

-moz-linear-gradient(起始颜色, 结束颜色)；

-o-linear-gradient(起始颜色, 结束颜色)；

linear-gradient(起始颜色, 结束颜色)；

对于IE来说是个麻烦事，

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

-ms-linear-gradient(起始颜色, 结束颜色)；

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

责任编辑：