CSS3是樣式表（style sheet）語言的最新版本，它的一大優點就是支持圓角。以前做圓角都是用圖片拼接而成，如果你還是停留在那個階段，我只能說你太落后了，現在用CSS3打造的圓角有這么幾個特點：提高網頁性能。，網頁的載入速度將變快，因為你不用加載多余圖片自然就快了，增加視覺可靠性。某些情況下（網絡擁堵、服務器出錯、網速過慢等等），背景圖片會下載失敗，導致視覺效果不佳。CSS3就不會發生這種情況；
下面是我開發當中總結的幾種CSS3圓角技術，這些是最基本的代碼，以后再遇到類似的問題你可以使用它來實現
1. css3 最簡單的邊框圓角
最簡單的方法實現的基本CSS3圓角，希望這個 CSS3 技術可以對您在前端開發中任何時候都更有幫助。
css代碼如下
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>css邊框圓角</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 #rounded-corners { 7 margin: 50px auto; 8 width:500px; 9 color:#fff; 10 padding:5px; 11 text-align:center; 12 font-size:20px; 13 background:#21759b; 14 border:2px solid; 15 border-radius:25px; -moz-border-radius:25px; 16 } 17 </style> 18 19 </head> 20 21 <body> 22 23 <div id="rounded-corners">css3 最簡單的邊框圓角</div> 24 25 </body>
2. 矩形的 CSS3 的陰影
在開發當中我們經常用到矩形帶陰影效果，光是矩形效果還好說，帶着陰影的話就不好弄了，其實實現也簡單，下面是具體的代碼
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3邊框效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #rectangle-shadow { box-shadow: 10px 10px 5px #888888; width:500px; padding:5px; text-align:center; font-size:20px; background:#21759b; margin:0 auto; color:#ffffff; } </style> </head> <body> <div id="rectangle-shadow">矩形的 CSS3 的陰影</div> </body> </html>
3. 使用圖像的CSS3邊框效果
在這里我們用css3打造邊框圖像屬性，為邊框加上圖像效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3邊框效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #border-image { border-image:url(border.png) 30 30 round; -moz-border-image:url(image-border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ width:500px; padding:5px; text-align:center; font-size:20px; margin:40px auto; color:#21759b; } </style> </head> <body> <div id="border-image">圖像邊框</div> </body> </html>