這篇文章主要講解了“CSS3中的border-radius屬性詳細(xì)介紹”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS3中的border-radius屬性詳細(xì)介紹”吧！
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、吳堡ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的吳堡網(wǎng)站制作公司
Border-radius
border-radius是一種縮寫方法。如果“/”前后的值都存在，那么“/”前面的值設(shè)置其水平半徑，“/”后面值設(shè)置其垂直半徑。如果沒(méi)有“/”，則水平和垂直半徑相等。
CSS Code復(fù)制內(nèi)容到剪貼板
border-radius: 2em 1em 4em / 0.5em 3em;
等價(jià)于：
CSS Code復(fù)制內(nèi)容到剪貼板
border-top-left-radius: 2em 0.5em;
border-top-rightright-radius: 1em 3em;
border-bottom-rightright-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
如何使用border-radius屬性
下面是border-radius屬性最基本的使用方法。
CSS Code復(fù)制內(nèi)容到剪貼板
.round {
border-radius: 5px; /* 所有角都使用半徑為5px的圓角，此屬性為CSS3標(biāo)準(zhǔn)屬性 */
-moz-border-radius: 5px; /* Mozilla瀏覽器的私有屬性 */
-webkit-border-radius: 5px; /* Webkit瀏覽器的私有屬性 */
border-radius: 5px 4px 3px 2px; /* 四個(gè)半徑值分別是左上角、右上角、右下角和左下角 */
}
1.用border-radius畫圓
實(shí)心圓
如圖，是用border-radius屬性畫出來(lái)的一個(gè)完美的實(shí)心圓。畫實(shí)心圓的方法是高度和寬度相等，并且把border的寬度設(shè)為高度和寬度的一半。代碼如下。
CSS Code復(fù)制內(nèi)容到剪貼板
#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
}
空心圓
通過(guò)border-radius屬性畫空心圓和畫實(shí)心圓的方法差不多，只是border的寬度只能小于高度和寬度的一半。代碼如下。
CSS Code復(fù)制內(nèi)容到剪貼板
#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
}
虛線圓
CSS Code復(fù)制內(nèi)容到剪貼板
#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
}
2.半圓和四分之一圓
半圓
以本例來(lái)講，半圓的畫法是把寬度設(shè)為高度的一半，并且也只設(shè)置左上角和左下角的半徑。代碼如下。
CSS Code復(fù)制內(nèi)容到剪貼板
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
}
四分之一圓
四分之一圓的實(shí)現(xiàn)方法是把高度和寬度設(shè)置為相等，只設(shè)置一個(gè)圓角，其半徑等于高度或?qū)挾?。本例代碼如下。
CSS Code復(fù)制內(nèi)容到剪貼板
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
}
更多玩法
看了這么多實(shí)例后，你完全可以自己創(chuàng)造更多玩法，如：
虛線的半圓和四分之一圓。
配合position屬性做一個(gè)月亮。
配合position、RGBa和z-index這些屬性做一個(gè)本文開頭的色彩維恩圖。
感謝各位的閱讀，以上就是“CSS3中的border-radius屬性詳細(xì)介紹”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS3中的border-radius屬性詳細(xì)介紹這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
