分享一個CSS3圓角和漸變功能的實例代碼

這篇文章主要介紹了CSS3圓角和漸變2種常用功能詳解的相關資料,需要的朋友可以參考下

Css3圓角講解：想必大家對於圖片，背景圓角，都不陌生吧，
圓角語法：border-radius：圓角值；
CSS3圓角的優點
傳統的圓角生成方案，必須使用多張圖片作為背景圖案。 CSS3的出現，使得我們再也不必浪費時間去製作這些圖片了，而且還有其他多個優點：
　　* 減少維護的工作量。圖片檔案的產生、更新、編寫網頁程式碼，這些工作都不再需要了。
　　* 提升網頁效能。由於不必再發出多餘的HTTP請求，網頁的載入速度將會變快。
　　* 增加視覺可靠度。某些情況下（網路壅塞、伺服器出錯、網速過慢等等），背景圖片會下載失敗，導致視覺效果不佳。 CSS3就不會發生這種情況。
這個值可以使用：em ，ex，pt，px，百分比;
Border-radius跟margin，padding差不多
Border-radius：lefttop，righttop，rightbottom，leftbottom。

程式碼如下:

<p class="box1"> 
</p> 
.box1{width:200px;height:100px;border-radius:30px 5px;background:#f66f17;margin-top:30px;}

<p class="box2"></p> 
.box2{width:200px;height:100px;border-radius:30px 20px 10px 0px;background:#f66f17;margin-top:30px;}

對於圓角理解起來應該，很簡單。
對於百分比：目前最安全的做法，就是將每個圓角邊框的風格和寬度，都設為一樣的值，並且避免使用百分比值。
IE9以下是不支援此屬性
線性漸層：background:linear-gradient(設定漸層形式,第一個色彩起點,中間色彩點中間色彩的位置,結束點色彩) ;
Linear:漸變的類型（線性漸變）；
漸變的形式：可選參數有兩種方式-1、設定旋轉角度，0度代表水平從左到右，90度就是從上到下啦，從0度開始逆時針變換。
2、使用關鍵字，left代表從左到右，top代表從上到下，同理right就是從右到左，lefttop-從坐上到右下，同理leftbottom，righttop，rightbottom。
中間顏色與中間顏色位置為可選參數。
不過要考慮瀏覽器的相容，咱們這樣寫：

-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*/

<p class="content1"></p> 
.content1{width:500px;height:
300
px;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=&#39;#88cfc3&#39;, endColorstr=&#39;#096e5d&#39;); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#88cfc3&#39;, endColorstr=&#39;#096e5d&#39;)";background:linear-gradient(lleft,#88cfc3,#329e8c 30%,#096e5d;
float
:left;} 
.tit1{
font-size
:3em;
font-weight
: bold;color:#f00;}

重複性線性漸層：repeating-linear-gradient屬性來代替線性漸層linear-gradient;

<p class="content2"></p> 
.content2{width:500px;height:200px; 
background-image
: -webkit-repeating-linear-gradient(red,green 40px, o
range
 80px); 
background-image: repeating-linear-gradient(red,green 40px, orange 80px);}

徑向漸層：radial-gradient（設定漸層的中心，漸層形狀漸層大小，起始顏色值，中間顏色值中間顏色位置，終點顏色）
漸變中心，可選參數，如30px 20px指距離左側30px距離上側20px，可以是像素，可以是百分比，也可以是關鍵字，預設為中心位置。
漸層形狀，可選參數，可以取值circle或eclipse【預設】
漸變大小，可循環參數，可以取值
closest-side ：
指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner:
指定徑向漸變的半徑長度為從圓心到離圓心最近的角
farthest -side：
指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
farthest-corner：
指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
contain：
包含，指定徑向漸變的半徑長度為從圓心到離圓心最近的點。類別同於closest-side
cover：
覆蓋，指定徑向漸變的半徑長度為從圓心到離圓心最遠的點。類別同於farthest-corner
circle farthest-corner圓形漸變，ellipse farthest-corner橢圓漸變

<p class="content3"></p> 
.content3{width:500px;height:200px; 
background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9)); 
background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));margin-top:20px;}

【相關推薦】

#1. 免費css線上影片教學

2. css線上手冊

3. php.cn獨孤九賤（ 2）－css影片教學

以上是分享一個CSS3圓角和漸變功能的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！