在web前端頁面實現圓角效果，css3幫你輕鬆實現，乙個人人皆知的屬性。
css3圓角的優點
傳統的圓角生成方案，必須使用多張作為背景圖案。css3的出現，使得我們再也不必浪費時間去製作這些了，而且還有其他多個優點：
* 減少維護的工作量。檔案的生成、更新、編寫網頁**，這些工作都不再需要了。
* 提高網頁效能。由於不必再發出多餘的http請求，網頁的載入速度將變快。
* 增加視覺可靠性。某些情況下（網路擁堵、伺服器出錯、網速過慢等等），背景會**失敗，導致視覺效果不佳。css3就不會發生這種情況。
圓角邊框的繪製是web頁面和web應用程式中經常用來美化頁面效果的手法之一。今天，小編為大家介紹css3提供的可以將矩形變為圓角矩形的乙個屬性
本節涉及到的css3屬性為：
一、圓角屬性的取值：
css3 使用border-radius屬性設定圓角效果
該屬性可以通過設定或塊級元素四個角的圓角半徑畫素數來實現該效果。w3c規定該屬性的可能取值為：
該屬性可以分別設定元素的四個圓角效果，採用下列格式來實現。
格式：border-radius: 左上角 右上角 右下角 左下角;
通常，四個方向的角半徑均採用length取值來實現，該取值必須為浮點數字和單位標識共同組成。同時規定，該取值不得取負數。
例1：利用整數來實現圓角取值。
div上述例項設定了乙個div塊級元素，其寬度為200px，高度為150px。為了能夠看到其圓角效果，增加了顏色為#ff5857的背景顏色，並且新增了1px大小的邊框，其邊框為實線，邊框顏色為#aaaaaa。最後設定其圓角效果，左上角和右下角均為10px，右上角和左下角均為5px。
下程式設計客棧面我們通過圖示的形式，以左上角為10畫素為例，來看一下這10元素是指哪段距離。乙個角的圓角效果包括兩部分：「水平角半徑」和「垂直角半徑」。乙個角的取值為乙個資料，表示其「水平角半徑」和「垂直角半徑」是相等的。
水平角半徑與垂直角半徑相等
看來，border-radius屬性的取值應該為四個值，表示四個方向的圓角幅度。若該屬性在取值時，取值個數小於四個，又應該如何理解呢？
例2：檢視下列css**。
（1）border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;
上述四組**中，只有組（1）提供了完全shqvsylpm符合格式的四個資料，其他三組均只提供了小於四個的資料。這種情況下，資料依然按照「左上角 右上角 右下角 左下角」的順序進行排列，沒有涉及到的角方向按照其對角的圓角資料進行設定。
因此，組（2）的資料表示左上角為10px，右上角為5px，右下角為15畫素，左下角為右上角的畫素設定，即5px。請同學們根據這樣的方法，理解一下組（3）的圓角含義。
組（4）就設定了乙個資料，這表示四個方向的角半徑均為10px。
二、獨立設定元素的四個圓角效果：
若只想設定乙個塊級元素右上角的圓角效果，該如何實現呢？這裡w3c為border-radius屬性派生出了表示四個方向的獨立圓角效果的子屬性。
上述四個子屬性的取值規則和border-radius屬性的取值規則是完全相同的。
例3：設定p標記的圓角效果，其中左下角沒有圓角效果，其他三個方向角的圓角效果均為25px。
方法1：利用border-radius屬性統一設定。
p方法2：利用border-radius屬性的派生子屬性設定。
p方法3：利用border-radius屬性設定所有角方向均為25px，再利用border-radius屬性的派生子屬性設定左下角沒有圓角效果。
p三、設定水平角半徑和垂直角半徑不同的圓角效果
w3c也提供了兩個角半徑不相同的圓角效果設定方式，這裡依然以左上角為例，來展示兩個角半徑不同的設定方式。
格式：border-top-left-radius:水平角半徑/垂直角半徑;
上述格式中，兩個方向的角半徑之間利用斜槓（/）間隔。
例4：設定div塊級元素的左上角圓角效果為：水平角半徑50px，垂直角半徑25px。
div水平角半徑與垂直角半徑不相等
例5：設定div塊級元素為乙個半徑為100px的正圓形。
div上述**中將塊級元素的圓角效果半徑設定為寬度或高度的一半，這樣就可以得到乙個半徑為寬度或高度的一半的正圓形。
例6：設定div塊級元素為乙個長半軸為100px，短半軸為75px的橢圓形。
div上述**中將塊級元素的水平角半徑設定為寬度的一半，垂直角半徑設定為高度的一半。由於這個塊級元素的寬度和高度不一樣，因此就可以得到乙個橢圓形。
四、利用百分比實現圓角效果：
w3c規定，同樣可以使用百分比來實現塊級元素的圓角效果。這裡，百分比值是相對於塊級元素的寬度或高度來作為依據的。水平角半徑的大小相對於塊級元素的寬度值依據，垂直角半徑的大小相對於塊級元素的高度值依據。
例7：檢視下列css**。
div上述**中，div標記的圓角效果中，水平角半徑為寬度的20%，即200px * 20% = 40px。垂直角半徑為高度的20%，也為40px。
例8：檢視下列**。
div上述**中，div標記的圓角效果中，水平角半徑為寬度的20%，即200px * 20% = 40px。垂直角半徑為高度的20%，即100px * 20% = 20px。
也就是說，只要border-radius的取值為50%，則當寬度和高度相同時，得到乙個正圓形；當寬度和高度不相同時，得到乙個橢圓形。
總結本文標題: css3輕鬆實現圓角效果
本文位址:
CSS3實現圓角效果
利用border radius屬性可以給元素div,input元素等新增圓角效果 後跟 值為這個圓角的半徑,即數值越大效果越明顯 webkit border top bottom left right radius可以給某個角新增弧度,上下 左右的順序不能反 左上 webkit border top...
CSS3 完美實現圓角效果
現在使用css3 技術不需要即可emgpoeufwh實現圓角，把側邊欄標題背景的圓角效果和搜尋框的圓角效果用 css3 實現。記錄一下以便以後使用。w3c 很早就制訂了實現了 css 圓角的 css3 屬性 border radius，fire 和 safari 也通過私有屬性實現了該功能 fire...
CSS3中輕鬆實現漸變效果
漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用來實現，css3將會輕鬆實現網頁漸變效果。background image moz linear gradient top,8fa1ff,3757fa firefox background image webkit gradient lin...