CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法詳解

以前想實(shí)現(xiàn)一個(gè)圓角是比較麻煩的,不過現(xiàn)在CSS3來了,實(shí)現(xiàn)圓角變的那么的簡單只需要一句話:border-radius即可。下面青島星網(wǎng)跟大家分享下:border-radius的具體用法。
CSS3圓角只需設(shè)置一個(gè)屬性:border-radius(含義是"邊框半徑")。你為這個(gè)屬性提供一個(gè)值,就能同時(shí)設(shè)置四個(gè)圓角的半徑。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。
border-radius的瀏覽器支持
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius屬性。
早期版本的Safari和Chrome,支持-webkit-border-radius屬性。
早期版本的Firefox支持-moz-border-radius屬性。
目前來看,為了保證兼容性,只需同時(shí)設(shè)置-moz-border-radius和border-radius即可。
-moz-border-radius: 15px; border-radius: 15px;
(注意:border-radius必須放在最后聲明,否則可能會(huì)失效。)
另外,早期版本Firefox的單個(gè)圓角的語句,與標(biāo)準(zhǔn)語法略有不同。
-moz-border-radius-topleft(標(biāo)準(zhǔn)語法:border-top-left-radius)
-moz-border-radius-topright(標(biāo)準(zhǔn)語法:border-top-right-radius)
-moz-border-radius-bottomleft(標(biāo)準(zhǔn)語法:border-bottom-left-radius)
-moz-border-radius-bottomright(標(biāo)準(zhǔn)語法:border-bottom-right-radius)
border-radius的實(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; }
CSS3 border-radius - 指定每個(gè)圓角
如果你在 border-radius 屬性中只指定一個(gè)值,那么將生成 4 個(gè) 圓角。
但是,如果你要在四個(gè)角上一一指定,可以使用以下規(guī)則:
四個(gè)值: 第一個(gè)值為左上角,第二個(gè)值為右上角,第三個(gè)值為右下角,第四個(gè)值為左下角。
三個(gè)值: 第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角,第三個(gè)值為右下角
兩個(gè)值: 第一個(gè)值為左上角與右下角,第二個(gè)值為右上角與左下角
一個(gè)值: 四個(gè)圓角值相同
CSS3 border-radius單個(gè)圓角的設(shè)置
單個(gè)圓角的設(shè)置除了同時(shí)設(shè)置四個(gè)圓角以外,還可以單獨(dú)對(duì)每個(gè)角進(jìn)行設(shè)置。對(duì)應(yīng)四個(gè)角,CSS3提供四個(gè)單獨(dú)的屬性:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
到此這篇關(guān)于CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法詳解的文章就介紹到這了,更多相關(guān)CSS3 border-radius圓角內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
使用CSS的border-radius屬性 設(shè)置圓弧
這篇文章主要介紹了使用CSS的border-radius屬性 設(shè)置圓弧,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-26- 這篇文章主要介紹了css3 border-radius屬性詳解,這里整理了詳細(xì)的代碼資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-05
- 用CSS3的border-radius屬性來制作圓角邊框相當(dāng)順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結(jié)一下border-radius以外的CSS圓角邊框制作方法.2016-06-02
CSS3 border-radius(圓角)效果在線調(diào)試工具
這是一款可在線調(diào)試并預(yù)覽CSS3 border-radius(圓角)效果的工具。右側(cè)具有實(shí)時(shí)調(diào)試并顯示預(yù)覽效果的功能,同時(shí)能夠?qū)崟r(shí)生成對(duì)應(yīng)的css3效果代碼,方便需要的朋友使用。2016-05-31利用CSS3的border-radius繪制太極及愛心圖案示例
CSS3中的border-radius可以輕松地用來繪制弧線,如果只用來做圓角矩形的話可就太浪費(fèi)了,下面就來展示一下利用CSS3的border-radius繪制太極及愛心圖案示例,需要的朋友可以參2016-05-17CSS3中border-radius屬性設(shè)定圓角的使用技巧
這篇文章主要介紹了CSS3中border-radius屬性設(shè)定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設(shè)置弧度來制作其他弧線邊框圖形,需要的朋友2016-05-10實(shí)例講解CSS3中的border-radius屬性
這篇文章主要介紹了實(shí)例講解CSS3中的border-radius屬性,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-18HTML+css盒子模型案例(圓,半圓等)“border-radius” 簡單易上手
這篇文章主要介紹了HTML+css盒子模型案例(圓,半圓等)“border-radius” 簡單易上手,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,2021-05-10