圓角樣式在CSS3中可(kě)以實現啦

　　伴随著(zhe)CSS3的(de)問世和(hé)普及，現在許許多(duō)多(duō)需要采用(yòng)JS才能實現的(de)網頁視覺效果用(yòng)CSS3即可(kě)輕易實現，許多(duō)需要用(yòng)圖片才能表達的(de)東西用(yòng)CSS3就可(kě)以，例如我們常用(yòng)的(de)圓角樣式。在此之前，要實現圓角，必須借助圖片或其它插件，現在，一切變得(de)非常簡單了(le)，隻需要加短短的(de)幾句CSS3代碼就可(kě)以了(le)。

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

　　使用(yòng)上面的(de)CSS3樣式就可(kě)以實現上圖所示的(de)圓角效果

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

　　/*左上角*/

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

　　/*右上角*/

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

　　/*左下(xià)角*/

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

　　/*右下(xià)角*/

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

　　怎麽樣，很容易實現吧CSS3圓角吧?其最大(dà)的(de)好處在于，不用(yòng)再爲一些圓角的(de)網頁元素而去用(yòng)Photoshop畫(huà)圖了(le)。更好的(de)地方是，由于用(yòng)CSS代替圖片，可(kě)以大(dà)大(dà)減少網頁加載量，提高(gāo)網頁打開速度哦。