怎么使用css3實(shí)現(xiàn)圓角效果-創(chuàng)新互聯(lián)

這篇文章主要介紹了怎么使用css3實(shí)現(xiàn)圓角效果，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司從2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元孝昌做網(wǎng)站,已為上家服務(wù),為孝昌各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18980820575

使用css3實(shí)現(xiàn)圓角效果的優(yōu)點(diǎn)

1. 減少網(wǎng)站維護(hù)工作量。

2. 提高了網(wǎng)站的性能，少了對(duì)圖片的 HTTP 的請(qǐng)求，網(wǎng)頁(yè)載入速度將變快。

3. 增加視覺(jué)美觀性。

使用css3實(shí)現(xiàn)圓角效果的原理

我們需要使用css3中的border-radius屬性，那么今天我們將帶大家詳細(xì)了解一下border-radius屬性。

      border-radius屬性

1. 含義:  border-radius屬性簡(jiǎn)寫(xiě)屬性為元素添加圓角邊框.

2. 語(yǔ)法：border-radius: 1-4 length|% / 1-4 length|%;

3. 瀏覽器兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。

使用css3實(shí)現(xiàn)圓角效果的代碼

實(shí)例一：指定背景顏色的元素圓角

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

實(shí)例效果如圖所示

實(shí)例二：指定特定的元素圓角

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

實(shí)例效果如圖所示

屬性的兩個(gè)長(zhǎng)度第一個(gè)值是水平半徑，第二個(gè)是垂直半徑。如果省略第二個(gè)值，它是從第一個(gè)復(fù)制。如果任一長(zhǎng)度為零，角落里是方的，不圓潤(rùn)。border-radius屬性還可以制作橢圓，我們將在后面的文章向大家介紹。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享怎么使用css3實(shí)現(xiàn)圓角效果內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

分享標(biāo)題：怎么使用css3實(shí)現(xiàn)圓角效果-創(chuàng)新互聯(lián)
鏈接URL：http://muchs.cn/article0/hcpio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、建站公司、微信小程序、網(wǎng)站制作、網(wǎng)站導(dǎo)航、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)