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

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

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

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

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

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

3. 增加視覺美觀性。

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

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

      border-radius屬性

1. 含義:  border-radius屬性簡寫屬性為元素添加圓角邊框.

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

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

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

實例一：指定背景顏色的元素圓角

#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; 
}

實例效果如圖所示

實例二：指定特定的元素圓角

#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; 
}

實例效果如圖所示

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

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

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

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

廣告

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