如何用css實現圓角_CSS實現圓角解決方案
導言：
本文探討的是圓角框的終極解決方案，其核心關鍵詞是“圓滑、完美、相容、重用性、語義”，這些技術都是收集目前網路上最流行的做法。縱觀種種方法，各有其優勢，請針對不同的環境分別使用。
圓角框，因為其樣式比直角框漂亮，所以成為設計師心中偏愛的設計項目。現在的web標準下大量的網頁、部落格都採用圓角框設計，成為一道亮麗的風景線。
然而，就是這個圓角，卻成為了網頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它相容通行於各種不同的瀏覽器卻成為一個永遠的神話。
讓我們來回顧一下目前網路流行的都有哪些解決方案。
第一種：無圖片純css圓角框
收錄理由：相容性強，不用圖形
圖一
特點：
缺點：
實現原理：
用很多1像素高的div容器，利用背景色和邊框色來類比出圓角框的輪廓線。
執行個體示範： http://www.cssplay.co.uk/boxes/snazzy.html
第二種：無圖片純css圓角框，用特殊字元（&bull）
收錄理由：圓滑，不用圖形
圖二
特點：
缺點：
實現原理：
用特殊字元（&bull），利用定位，截取四分之一圓類比出圓角框的一個角圖片。
執行個體示範：http://www.cssplay.co.uk/boxes/curves.html
第三種：圖片圓角框
收錄理由：相容性強，可以表現很複雜的圓角效果。
圖三
特點：
缺點：
利用九宮格原理，在一個容器的四個角加入絕對位置（或相對定位）的四張圓角圖片。
執行個體示範：http://www.cssplay.co.uk/boxes/three_cornered.html
第四種：利用VML繪製圓角（ie only）
收錄理由：無圖片，平滑，可加陰影邊框
圖四
特點：
缺點：
實現原理：使用IE專用的VML來畫出圓角。
<v:roundrect
id="roundbox"
class="circle"
strokecolor="red"
strokeweight="2px"
arcsize="0.08">
</ v:roundrect >
注意加入引用空間：
<html xmlns:v xmlns="http://www.w3.org/1999/xhtml">
這是相容的用法，
xmlns:v一不能少，否則。。。
樣式表中加入這一句話：
v":*{behavior:url(#default#VML);display:inline-block;}
Arcsize為半徑
Strokeweight為邊框線寬度
Strokecolor為邊框線的顏色
執行個體示範：（請在IE系列瀏覽器下查看本執行個體)
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VML畫平滑圓角框</title>
<style>
v\:*{behavior:url(#default#VML);display:inline-block;}
body{ background-color:#99FFFF;font-size:12px;}
.circle{
height:130px;
width:300px;
padding-top:8px;
margin:0px auto;
z-index:2;
margin-left:340px;
}
h1{border-bottom:2px red solid;font-size:12px;margin:4px;text-indent:1em;height:20px;}
div{font-size:12px;padding:10px;}
</style>
</head>
<body>
<v:roundrect id="roundbox" class="circle" strokecolor="red" strokeweight="2px" arcsize="0.08">
<h1>VML畫平滑圓角</h1>
<div class="t1">
使用IE專用的VML來畫平滑圓角框，還可以畫出陰影製作效果。就其圖形表現來說，是非常完美的。
</div>
<v:shadow on="t" color="#777" opacity="52428f" offset="1.5pt,1.5pt"/>
</v:roundrect>
</body>
</html>
第五種：利用私人屬性繪製圓角（FF3 only）
收錄理由：平滑無鋸齒
圖五
特點：
缺點：
實現原理：
使用FF3專用的私人屬性來畫出圓角。
只用兩種屬性就能體現圓滑的圓角框
-moz-border-radius:10px;/*圓角半徑*/
Border:5px red solid;/*邊框大小*/
執行個體示範：（請在FF3瀏覽器下觀看，其它瀏覽器不支援）
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FF3下的圓角框</title>
<style type="text/css">
body{background:#CCCCCC;}
.round{
-moz-border-radius:20px;/*半徑*/
border:4px solid #333;/*邊框寬度*/
margin:50px auto;width:30%;height:150px;font-size:12px;
}
h1{border-bottom:4px #333 solid;font-size:12px;width:100%;padding:5px 0;text-indent:1em;}
.context{font-size:12px;padding:10px;}
</style>
</head>
<body>
<div class="round">
<h1>FF3私人屬性畫的圓角框</h1>
<div class="context">
<p>FF3下的圓角框兩個屬性就可以解決:</p>
<p>-moz-border-radius：半徑</p>
<p>border：邊框 </p>
</div>
</div>
</body>
</html>
第六種：無圖片指令碼圓角框（js半完美解決方案）
這種方案目前應該是比較完美的方案了。
圖六
特點：
缺點：
執行個體示範：http://www.curvycorners.net/examples.php（有三個示範例子）
結語：
目前的css因為不能為一個容器中定義多張背景圖片，造成了為了這種圓角效果而加入冗餘標籤。聽說CSS3會引入這一屬性，可能到哪時，就是圓角框統一的時候了。另外也聽說在CSS3中有意向加入像FF3私人屬性（-moz-border-radius）的方法，這也可以完美地解決這個問題。但在目前的情勢下，可能也只有用上面的這些方法來過渡了，強烈期待CSS3的到來。
總而言之：要實現絕對的完美圓角框在目前的形勢下基本上是不可能的，所以取名為“半完美解決方案”。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
