使用字元實現的圓角

參考zhangxinxu的“告別圖片—使用字元實現相容性的圓角尖角效果beta版”，寫的一個使用字元實現圓角的效果。

      當今WEB設計是一個追求效能的時代，多一張圖片就意味著多一次HTTP請求，使用css設計一些簡單的效果代替圖片，我覺得是一種聽起來就很“雞凍”的做法，終於可以擺脫設計的瓶頸，把主動權把握在自己手裡了，呵呵。在這裡只是拋磚引玉，CSS博大精深，我們探索的腳步不應該停止。

      閑話不扯了，源碼奉上：

<div class="box"><b class="c l t"><b>●</b></b><b class="c r t"><b class="ml">●</b></b><b class="c l b"><b class="mt">●</b></b><b class="c r b"><b class="mtl">●</b></b><p><br />Text...</p></div>

樣式：

.box{background-color:orange;width:500px;height:100px;margin:3em;position:relative;}.c{background-color:#FFF;color:orange;float:left;width:8px;height:8px;overflow:hidden;font-family:'宋體';position:absolute;}.c b{float:left;font-size:16px;line-height:1;_line-height:1.1;font-weight:normal;}.ml{margin-left:-7px;}.mt{margin-top:-7px;}.mtl{margin:-7px 0 0 -7px;}.t{top:-1px;}.b{bottom:-1px;}.l{left:-1px;}.r{right:-1px;}

另外一種風格：

<div class="box box2"><b class="c l t"><b>●</b></b><b class="c r t"><b class="ml">●</b></b><b class="c l b"><b class="mt">●</b></b><b class="c r b"><b class="mtl">●</b></b><p><br />Text...</p><b class="c c2 l2 t2"><b>●</b></b><b class="c c2 r2 t2"><b class="ml">●</b></b><b class="c c2 l2 b2 "><b class="mt">●</b></b><b class="c c2 r2 b2"><b class="mtl">●</b></b></div>

再添加樣式：

.box2{background-color:#F8F8F8;border:1px solid orange;}.c2{background-color:transparent;color:#F8F8F8;}.t2{top:0;}.b2{bottom:0;}.l2{left:0;}.r2{right:0;}

      很聰明的辦法，技術的關鍵是四個四分之一圓弧的獲得。筆者在操作中使用了strict DTD，結果導致左右下角兩個圓弧顯示分別和左右上方兩個圓弧一樣，改為過渡型後正常；還有，字元字型最好是使用宋體，其他字型font-size無法控制大小（或很難控制或出於字型支援程度考慮）。