做網站用CSS3代碼寫圓角樣式
發布時間：2014/11/03 來源：長沙做網站
隨著CSS3的問世和普及，許許多多需要采用JS才能實現的網頁視覺效果用CSS3即可輕易實現，許多需要用圖片才能表達的東西用CSS3就可以，例如我們常用的圓角樣式。在此之前，要實現圓角，必須借助圖片或其它插件，現在，一切變得非常簡單了，只需要加短短的幾句CSS3代碼就可以了。
CSS3代碼：border-radius:5px;-moz-border-radius:5px;
使用上面的CSS3樣式就可以實現上圖所示的圓角效果
CSS3甚至允許你設置每一個角的樣式，例如如下代碼。
/*左上角*/
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;
怎么樣，很容易實現吧CSS3圓角吧？其最大的好處在于，不用再為一些圓角的網頁元素而去用Photoshop畫圖了。更好的地方是，由于用CSS代替圖片，可以大大減少網頁加載量，提高網頁打開速度哦。
長沙做網站擁有多年做網站經驗，采用最新的HTML5和CSS3技術建設網站，界面設計注重用戶體驗，對搜索引擎優化非常友好，如果有做網站需要可以聯系我們的在線客服。
長沙做網站擁有多年做網站經驗，采用最新的HTML5和CSS3技術建設網站，界面設計注重用戶體驗，對搜索引擎優化非常友好，如果有做網站需要可以聯系我們的在線客服。