伴随着CSS3的問世和(hé)普及，現在許許多(duō)多(duō)需要采用JS才能實現的網頁視(shì)覺效果用CSS3即可(kě)輕易實現，許多(duō)需要用圖片才能表達的東西用CSS3就可(kě)以，例如我們常用的圓角樣式。在此之前，要實現圓角，必須借助圖片或其它插件，現在，一切變得(de)非常簡單了，隻需要加短(duǎn)短(duǎn)的幾句CSS3代碼就可(kě)以了。
CSS3代碼：border-radius:5px;-moz-border-radius:5px;
使用上(shàng)面的CSS3樣式就可(kě)以實現上(shàng)圖所示的圓角效果
CSS3甚至允許你(nǐ)設置每一個(gè)角的樣式，例如如下代碼。
/*左上(shàng)角*/
border-top-left-radius:5px;-webkit-border-top-left-radius:5px;
/*右上(shàng)角*/
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;
怎麽樣，很(hěn)容易實現吧(ba)CSS3圓角吧(ba)?其最大(dà)的好處在于，不用再為(wèi)一些(xiē)圓角的網頁元素而去用Photoshop畫(huà)圖了。更好的地方是，由于用CSS代替圖片，可(kě)以大(dà)大(dà)減少(shǎo)網頁加載量，提高(gāo)網頁打開(kāi)速度哦。
