Css3圓角講解：想必大家對于圖片，背景圓角，都不陌生吧，
圓角語法：border-radius：圓角值；
CSS3圓角的優(yōu)點(diǎn)
傳統(tǒng)的圓角生成方案，必須使用多張圖片作為背景圖案。CSS3的出現(xiàn)，使得我們再也不必浪費(fèi)時間去制作這些圖片了，而且還有其他多個優(yōu)點(diǎn)：
　　* 減少維護(hù)的工作量。圖片文件的生成、更新、編寫網(wǎng)頁代碼，這些工作都不再需要了。
　　* 提高網(wǎng)頁性能。由于不必再發(fā)出多余的HTTP請求，網(wǎng)頁的載入速度將變快。
　　* 增加視覺可靠性。某些情況下（網(wǎng)絡(luò)擁堵、服務(wù)器出錯、網(wǎng)速過慢等等），背景圖片會下載失敗，導(dǎo)致視覺效果不佳。CSS3就不會發(fā)生這種情況。
這個值可以使用：em ，ex，pt，px，百分比;
Border-radius跟margin，padding差不多
Border-radius：lefttop，righttop，rightbottom，leftbottom。

對于圓角理解起來應(yīng)該，很簡單。
對于百分比：目前最安全的做法，就是將每個圓角邊框的風(fēng)格和寬度，都設(shè)為一樣的值，并且避免使用百分比值。
IE9以下是不支持此屬性
線性漸變：background:linear-gradient(設(shè)置漸變形式,第一個顏色起點(diǎn),中間顏色點(diǎn) 中間顏色的位置,結(jié)束點(diǎn)顏色);
Linear:漸變的類型（線性漸變）；
漸變的形式：可選參數(shù) 有兩種方式-1、設(shè)置旋轉(zhuǎn)角度，0度代表水平從左到右，90度就是從上到下啦，從0度開始逆時針變換。
2、使用關(guān)鍵字，left代表從左到右，top代表從上到下，同理right就是從右到左，lefttop-從坐上到右下，同理leftbottom，righttop，rightbottom。
中間顏色與中間顏色位置為可選參數(shù)。
不過要考慮瀏覽器的兼容，咱們這樣寫：
-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é)束顏色）； /*標(biāo)準(zhǔn)屬性*/
對于IE來說是個麻煩事，老辦法
Filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’ 起始顏色’,endColorstr=” 結(jié)束顏色”); /*IE6,IE 7*/
-ms-linear-gradient（起始顏色, 結(jié)束顏色）； /*IE8*/

重復(fù)性線性漸變：repeating-linear-gradient屬性來代替線性漸變linear-gradient；

徑向漸變：radial-gradient（設(shè)置漸變的中心，漸變形狀 漸變大小，起始顏色值，中間顏色值 中間顏色位置，終點(diǎn)顏色）
漸變中心，可選參數(shù)，如30px 20px指距離左側(cè)30px距離上側(cè)20px，可以是像素，可以是百分比，也可以是關(guān)鍵字，默認(rèn)為中心位置。
漸變形狀，可選參數(shù)，可以取值circle或eclipse【默認(rèn)】
漸變大小，可循環(huán)參數(shù)，可以取值
closest-side：
指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner：
指定徑向漸變的半徑長度為從圓心到離圓心最近的角
farthest-side：
指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊
farthest-corner：
指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角
contain：
包含，指定徑向漸變的半徑長度為從圓心到離圓心最近的點(diǎn)。類同于closest-side
cover：
覆蓋，指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的點(diǎn)。類同于farthest-corner
circle farthest-corner圓形漸變，ellipse farthest-corner橢圓漸變

最新評論