報道公司事件 · 傳播行業(yè)動態(tài)
伴隨著CSS3的問世和普及,現(xiàn)在許許多多需要采用JS才能實現(xiàn)的網(wǎng)頁視覺效果用CSS3即可輕易實現(xiàn),許多需要用圖片才能表達(dá)的東西用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)頁打開速度哦。
Copyright 大連網(wǎng)龍科技 版權(quán)所有 遼ICP備14006349號 html - txt - xml