CSS3 border-radius 屬性範例、創造圓角效果

CSS3 border-radius 屬性範例、創造圓角效果

<div style="border:1px #ccc solid;border-radius:8px;width:460px;height:50px;background-color:#eee;">CSS3 border-radius 圓角特效</div>

範例輸出結果

CSS3 border-radius 圓角特效

傳統在設計一個區塊的圓角效果通常必須採用圖片的方式來設計，預設的 DIV 區塊四個角都是直角，CSS3 新增了 border-radius 屬性，可以快速的設計出圓角效果，大幅度節省設計時間，圓角效果還有多種變化，請參閱《CSS3 圓角 border-radius》篇詳細介紹。