css3 border-radius屬性詳解
我要評(píng)論有什么用？
這個(gè)radius屬性，可不只是設(shè)置圓角，還可以用來(lái)畫(huà)一些簡(jiǎn)單的圖形。
畫(huà)個(gè)圓形
#demo1 {
width:100px;
height:100px;
background:red;
border-radius: 50%;
}
上述50%就是說(shuō)設(shè)置各邊圓角都為50%。
那么如何畫(huà)個(gè)半圓？
如下，把寬度設(shè)置為高度的兩倍。
#demo2 {
width:100px;
height:50px;
background:green;
border-radius: 50px 50px 0 0;
}
結(jié)果。如圖，矩形為100*50 。然后左上角和右上角的圓角分別是50px。因此就是半圓了。
左側(cè)半圓
#demo3 {
width:50px;
height:100px;
background: pink;
border-radius: 50px 0 0 50px;
}
畫(huà)半圓了，關(guān)鍵是把握住寬度和高度的比例關(guān)系，先畫(huà)個(gè)矩形，然后設(shè)置各個(gè)方向的圓角就可以了。注意順序是從左上角開(kāi)始的順時(shí)針?lè)较颉?/p>
1/4圓呢？
#demo4 {
width:100px;
height:100px;
background:gray ;
border-radius: 100px 0 0 0;
}
先畫(huà)一個(gè)正方形，然后設(shè)置任意一個(gè)圓角為100%就可以。設(shè)置哪個(gè)角度是100%哪個(gè)角度就是弧線。
PS
css里并沒(méi)有直接畫(huà)圓的，而是通過(guò)圓角實(shí)現(xiàn)的，當(dāng)然你也可以通過(guò)canvas來(lái)實(shí)現(xiàn)。
參考
2．半圓圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn)
相關(guān)文章
CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法詳解
這篇文章主要介紹了CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-14
使用CSS的border-radius屬性 設(shè)置圓弧
這篇文章主要介紹了使用CSS的border-radius屬性 設(shè)置圓弧,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-26- 用CSS3的border-radius屬性來(lái)制作圓角邊框相當(dāng)順手,然而瀏覽器的兼容問(wèn)題并不是太好處理,這里我們就來(lái)總結(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繪制太極及愛(ài)心圖案示例
CSS3中的border-radius可以輕松地用來(lái)繪制弧線,如果只用來(lái)做圓角矩形的話可就太浪費(fèi)了,下面就來(lái)展示一下利用CSS3的border-radius繪制太極及愛(ài)心圖案示例,需要的朋友可以參2016-05-17CSS3中border-radius屬性設(shè)定圓角的使用技巧
這篇文章主要介紹了CSS3中border-radius屬性設(shè)定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設(shè)置弧度來(lái)制作其他弧線邊框圖形,需要的朋友2016-05-10實(shí)例講解CSS3中的border-radius屬性
這篇文章主要介紹了實(shí)例講解CSS3中的border-radius屬性,是CSS3入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-18
HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡(jiǎn)單易上手
這篇文章主要介紹了HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡(jiǎn)單易上手,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，2021-05-10
