網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：年前發(fā)表的《The visual design of Web 2.0》中提到“Rounded everything”，圓角因使人感覺(jué)舒適的友好風(fēng)格而變得無(wú)處不在。而W3C早在 2002年的CSS3草案 中就加入了一個(gè)叫 border-radius 的屬性，通過(guò)它可以直接來(lái)定義HTML元素的圓角。

秦歌(YanKaven) 的站點(diǎn)：

兩年前發(fā)表的《The visual design of Web 2.0》中提到“Rounded everything”，圓角因使人感覺(jué)舒適的友好風(fēng)格而變得無(wú)處不在。這個(gè)無(wú)處不在也讓很多前端工程師累個(gè)半死，YAHOO Performance Research Engneer Team 的Nicole在講演《Designing Fast Websites》中用的副標(biāo)題是don’t blame the rounded corners!，從側(cè)面也說(shuō)明了圓角給實(shí)現(xiàn)者帶來(lái)的困擾：實(shí)現(xiàn)麻煩、兼容困難、性能不佳。而W3C早在 中就加入了一個(gè)叫 的屬性，通過(guò)它可以直接來(lái)定義HTML元素的圓角。

CSS3的border-radius規(guī)范

中其主要信息如下：

瀏覽器支持

實(shí)際中，目前沒(méi)有任何一款瀏覽器支持這個(gè)屬性，只有部分瀏覽器利用其私有屬性支持部分實(shí)現(xiàn)：

實(shí)際應(yīng)用

最簡(jiǎn)單的應(yīng)用就是支持的用圓角，不支持的用方角。比如Wordpress2.7的后臺(tái)、雅虎口碑UED 的blog和 今天你帶傘了嗎? 。基礎(chǔ)代碼如下：

border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;

實(shí)現(xiàn)請(qǐng)看演示實(shí)例。

利用VML可以實(shí)現(xiàn)從IE5-7的圓角 ，但是貌似IE8不支持VML了。組件DD_roundies 就是綜合以上解決方案的一個(gè)具體應(yīng)用。說(shuō)實(shí)話這樣實(shí)現(xiàn)出來(lái)的圓角也比較粗糙了，我感覺(jué)還不如不要。

像VML一樣，Canvas也能實(shí)現(xiàn)圓角，切除了IE外，所有的主流瀏覽器都支持。所以就有了兩者結(jié)合實(shí)現(xiàn)的組件 Cornerz 。

如果上面的現(xiàn)實(shí)太痛苦，而又非要用圓角的話，要么一個(gè)像素一個(gè)像素去拼裝，比如Chunky Borders；要么就老老實(shí)實(shí)用圖片來(lái)實(shí)現(xiàn)吧，比如 CSS Mojo 的方式。