漸變的形式：可選參數(shù) 有兩種方式-

1、設(shè)置旋轉(zhuǎn)角度，0度代表水平從左到右，90度就是從上到下啦，從0度開始逆時針變換。

2、使用關(guān)鍵字，left代表從左到右，top代表從上到下，同理right就是從右到左，lefttop-從坐上到右下，同理leftbottom，righttop，rightbottom。，中間顏色與中間顏色位置為可選參數(shù)。

今天文匯小編就給大家分享一下css3實現(xiàn)與那叫邊框漸變，首先先建一個button，

先把代碼寫出來不要考慮瀏覽器兼容問題，

-webkit-gradient（linear,0 0,0 100%,from(起始顏色,to(結(jié)束顏色)）； /*for Safari4+,Chrome 2+*/     -webkit-linear-gradient（起始顏色, 結(jié)束顏色）； /*for Safari 5.1+,Chrome 10+*/ 
-moz-linear-gradient（起始顏色, 結(jié)束顏色）； /*for firefox*/ 
-o-linear-gradient（起始顏色, 結(jié)束顏色）； /*Opera*/ 
linear-gradient（起始顏色, 結(jié)束顏色）； /*標準屬性*/ 
對于IE來說是個麻煩事，
Filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’ 起始顏色’,endColorstr=” 結(jié)束顏色”); /*IE6,IE 7*/
-ms-linear-gradient（起始顏色, 結(jié)束顏色）； /*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;}