伴隨著CSS3的問世和普及，現(xiàn)在許許多多需要采用JS才能實現(xiàn)的網(wǎng)頁視覺效果用CSS3即可輕易實現(xiàn)，許多需要用圖片才能表達的東西用CSS3就可以，例如我們常用的圓角樣式。在此之前，要實現(xiàn)圓角，必須借助圖片或其它插件，現(xiàn)在，一切變得非常簡單了，只需要加短短的幾句CSS3代碼就可以了。

　　CSS3代碼：border-radius:5px;-moz-border-radius:5px;

　　使用上面的CSS3樣式就可以實現(xiàn)上圖所示的圓角效果

　　CSS3甚至允許你設(shè)置每一個角的樣式，例如如下代碼。

　　/*左上角*/

　　border-top-left-radius:5px;-webkit-border-top-left-radius:5px;

　　/*右上角*/

　　border-top-right-radius:5px;-webkit-border-top-right-radius:5px;

　　/*左下角*/

　　border-bottom-left-radius:5px;-webkit-border-bottom-left-radius:5px;

　　/*右下角*/

　　border-bottom-right-radius:5px;-webkit-border-bottom-right-radius:5px;

　　怎么樣，很容易實現(xiàn)吧CSS3圓角吧?其最大的好處在于，不用再為一些圓角的網(wǎng)頁元素而去用Photoshop畫圖了。更好的地方是，由于用CSS代替圖片，可以大大減少網(wǎng)頁加載量，提高網(wǎng)頁打開速度哦。