前言
有時候我們不得不面對圓角，也很傻很天真的認為利用 CSS3 的新特性對浏覽器分級支持是最好解決方案，但現實≠理想…
需求
- 3px 圓角
- 寬度自適應（隨著文字字數擴展寬度並自動換行）
- 換膚
- 不使用圖片（對可維護性/性能均有影響）
困惑
經典的解決方案看起來像這樣：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>傳統方案及bug</title>
<style>
body{margin:100px;background-color:red;}
div, p, b{margin:0;padding:0;}
b{display:block;}
.rc{display:inline-block;#display:inline;#zoom:1;}
/* float 效果相同
.rc{float:left;} */
.rc1, .rc2, .rc .bd{border-style:solid;border-color:black;background-color:yellow;}
.rc1, .rc2{height:1px;overflow:hidden;}
.rc2, .rc .bd{border-width:0 1px;}
.rc1{margin:0 2px;height:0;border-width:1px 0 0;}
.rc2{margin:0 1px;}
.rc .bd{padding:0 6px;line-height:1.5;}
</style>
</head>
<body>
<div class="rc">
<b class="top"><b class="rc1"></b><b class="rc2"></b></b>
<div class="bd">
<p>FML!!!</p>
</div>
<b class="bottom"><b class="rc2"></b><b class="rc1"></b></b>
</div>
</body>
</Html>
使 rc float: left 或 display: inline-block 或許能滿足需求，不過 IE 6&7 出現 bug：IE6中依然顯示為dispaly:block，而IE7中top 和 bottom縮成一坨，不肯擴展開來，而在 rc1/rc2/rc3 中插入文字
<b class="rc1">XXX</b>
則只能擴展到文字XXX的寬度，無法與 bd 對齊！
如果你能搞定，麻煩留言告訴我一下 :)
解決
試了幾個方法均不通，也搜索不到這個 bug，這時想到了 Google 系產品的 1px 圓角按鈕：
這是前 Google 視覺設計師 Doug Bowman 的功勞，後轉會到Twitter（AD一下：@ytzong），Doug Bowman 為此寫過一篇博文《Recreating the button》 demo在此。不過demo 也僅僅是 demo，產品中使用的還是某對天才工程師夫婦的神作，他們有足夠的時間來做這項工作：
The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work.
打開 Gmail，用 firebug 艹艹看了一下，心裡暗罵一句：天才就是天才！
寫了個簡單的 demo（為了演示方便這裡采用了盒諧的顏色）：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>自適應圓角</title>
<style>
body{margin:100px;background-color:red;}
div, p{margin:0;padding:0;}
.div1, .div2, .div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;}
.div1{border-width:1px;}
.div2, .div3{#left:-2px;border-width:0 1px;background-color:yellow;}
.div2{margin:0 -2px;}
.div3{margin:1px -2px;padding:0 6px;line-height:1.5;}
.pointer1, .pointer2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6px transparent dotted;border-bottom:6px transparent dotted;}
.pointer1{left:-9px;border-right:6px black solid;}
.pointer2{left:-8px;border-right:6px yellow solid;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<p>FML!!!</p>
</div>
</div>
<div class="pointer1"></div>
<div class="pointer2"></div>
</div>
</body>
</Html>
效果如下：
不僅滿足了需求，代碼量及結構嵌套也很少。
代碼說明
- div1 實現上下兩條邊，div2 實現 2px 圓角處的 4個點（一般人只有3點），div3 實現左右兩條邊，div1 設置左右邊框的原因是避免IE 6&7 中的一個盒模型的小 bug，有興趣研究的話可去掉左右邊框看下效果
- pointer1 實現小三角的邊框，pointer2 實現小三角的背景，此處利用了 border 來模擬小三角，這其中會遇到IE 6 的邊框不透明 bug。另外，你也可以看看ooCSS的寫法
- 寬度自適應利用的是 display: inline-block，注意IE 6&7 中的處理方式
- #left:-2px 之前的 # 為 IE 6&7 hack，多寫為*，這裡用#一是表明偶的與眾不同，二是微軟的 Expression Web格式化 CSS 的時候若{}中出現*則會把代碼搞亂，此處 IE 6&7 中出現了 margin-left 負值無效的 bug ，通過 position:relative 加 left: -2px 實現
- <meta content=”text/Html; charset=utf-8″ http-equiv=”Content-Type” /> 不寫為 <meta charset=”utf-8″ /> 的原因是 IE 下中文標題會亂碼
可以看出：IE 6&7 bug 眾多的特點在此例中表現的淋漓盡致！
最後的話
阮一峰老師也寫過一篇《制作Gmail式按鈕》，配合強大的 jquery 來實現按鈕各種狀態，最後的總結也很精彩，修改一下下：
雖然這種按鈕（圓角）的視覺效果比較理想，有很多設計上的優點，但是局限性也很大。一方面，它需要大量的冗余代碼，與語義網的原則相違背…
完美方案還是利用浏覽器的自身特性提供對不同的浏覽器分級支持，漸進增強（比如 IE 下顯示為直角，對CSS 3支持較好的浏覽器顯示為圓角），這才是開發效率、可維護性、語義、性能的最佳平衡。