CSS3 的 border-radius 屬性輕鬆幫 DIV 變出圓角

以前在做網頁設計的時候，想要設計一個區塊有四邊圓角必須花上許多功夫，什麼功夫呢？當然就是美工的功夫囉！雖然說打開 GIMP 或 Photoshop 可以很快的做出圓角效果，可是畢竟還是要花點時間的嘛～如果趕著交件怎麼辦呢？其實 CSS3 本身就有一個 border-radius 可以使用，簡單一句語法就能讓一個區塊變成有圓角的效果，想看看效果嗎？

這裡寫個比較基本的範例給各位看看。

<div style="border:2px green solid;border-radius:8px;width:400px;height:80px;">
CSS border-radius 屬性範例
</div>

實際的顯示效果

CSS border-radius 屬性範例

從範例中可以看到這個範例 DIV 區塊的四個角都是圓角，這就是用 border-radius 屬性產生出來的效果，CSS 設計師可以透過修改 8px 為其他數字單位來修改圓角的大小。

如果想要各別設定不同方位角的圓角大小，CSS3 的 border-radius 屬性也做得到，有興趣的朋友可以閱讀看看 Wibibi 的《CSS3 圓角 border-radius》篇有詳細介紹，有了這個技巧，將來想要做 DIV 區塊的圓角就簡單多囉！而且很有效率呢！