做網(wǎng)站用CSS3代碼寫(xiě)圓角樣式
發(fā)布時(shí)間：2014/11/03 來(lái)源：長(zhǎng)沙做網(wǎng)站
隨著CSS3的問(wèn)世和普及，許許多多需要采用JS才能實(shí)現(xiàn)的網(wǎng)頁(yè)視覺(jué)效果用CSS3即可輕易實(shí)現(xiàn)，許多需要用圖片才能表達(dá)的東西用CSS3就可以，例如我們常用的圓角樣式。在此之前，要實(shí)現(xiàn)圓角，必須借助圖片或其它插件，現(xiàn)在，一切變得非常簡(jiǎn)單了，只需要加短短的幾句CSS3代碼就可以了。
CSS3代碼：border-radius:5px;-moz-border-radius:5px;
使用上面的CSS3樣式就可以實(shí)現(xiàn)上圖所示的圓角效果
CSS3甚至允許你設(shè)置每一個(gè)角的樣式，例如如下代碼。
/*左上角*/
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;
怎么樣，很容易實(shí)現(xiàn)吧CSS3圓角吧？其最大的好處在于，不用再為一些圓角的網(wǎng)頁(yè)元素而去用Photoshop畫(huà)圖了。更好的地方是，由于用CSS代替圖片，可以大大減少網(wǎng)頁(yè)加載量，提高網(wǎng)頁(yè)打開(kāi)速度哦。
長(zhǎng)沙做網(wǎng)站擁有多年做網(wǎng)站經(jīng)驗(yàn)，采用最新的HTML5和CSS3技術(shù)建設(shè)網(wǎng)站，界面設(shè)計(jì)注重用戶體驗(yàn)，對(duì)搜索引擎優(yōu)化非常友好，如果有做網(wǎng)站需要可以聯(lián)系我們的在線客服。
長(zhǎng)沙做網(wǎng)站擁有多年做網(wǎng)站經(jīng)驗(yàn)，采用最新的HTML5和CSS3技術(shù)建設(shè)網(wǎng)站，界面設(shè)計(jì)注重用戶體驗(yàn)，對(duì)搜索引擎優(yōu)化非常友好，如果有做網(wǎng)站需要可以聯(lián)系我們的在線客服。
- 相關(guān)文章
- 美大學(xué)退休校長(zhǎng)退休開(kāi)網(wǎng)絡(luò)妓院當(dāng)雞頭
- 人生的危機(jī)
- 理想和追求激勵(lì)著我們前進(jìn)
- 陜西省的互聯(lián)網(wǎng)產(chǎn)業(yè)能否再現(xiàn)往日輝煌
- 做網(wǎng)站公司員工電話費(fèi)用管理辦法
- 長(zhǎng)沙做網(wǎng)站科研開(kāi)發(fā)工作管理辦法
- 軟件開(kāi)發(fā)疲軟將會(huì)導(dǎo)致制約BYOD發(fā)展
- 長(zhǎng)沙中山路做網(wǎng)站的公司和工作室有哪些？
- 網(wǎng)站在手機(jī)端和電腦端自動(dòng)識(shí)別客戶端的辦法
- 做網(wǎng)站公司談企業(yè)進(jìn)行網(wǎng)站建設(shè)的意義