css3 border-radius屬性詳解
發(fā)布時間：2017-07-05 16:44:25 作者：鴨梨山大哎 
我要評論
我要評論這篇文章主要介紹了css3 border-radius屬性詳解,這里整理了詳細的代碼資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
有什么用？
這個radius屬性，可不只是設置圓角，還可以用來畫一些簡單的圖形。
畫個圓形
#demo1 {
width:100px;
height:100px;
background:red;
border-radius: 50%;
}
上述50%就是說設置各邊圓角都為50%。
那么如何畫個半圓？
如下，把寬度設置為高度的兩倍。
#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;
}
畫半圓了，關鍵是把握住寬度和高度的比例關系，先畫個矩形，然后設置各個方向的圓角就可以了。注意順序是從左上角開始的順時針方向。
1/4圓呢？
#demo4 {
width:100px;
height:100px;
background:gray ;
border-radius: 100px 0 0 0;
}
先畫一個正方形，然后設置任意一個圓角為100%就可以。設置哪個角度是100%哪個角度就是弧線。
PS
css里并沒有直接畫圓的，而是通過圓角實現(xiàn)的，當然你也可以通過canvas來實現(xiàn)。
參考
相關文章
CSS3 border-radius圓角的實現(xiàn)方法及用法詳解
這篇文章主要介紹了CSS3 border-radius圓角的實現(xiàn)方法及用法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-14
這篇文章主要介紹了使用CSS的border-radius屬性 設置圓弧,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-26- 用CSS3的border-radius屬性來制作圓角邊框相當順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結(jié)一下border-radius以外的CSS圓角邊框制作方法.2016-06-02
CSS3 border-radius(圓角)效果在線調(diào)試工具
這是一款可在線調(diào)試并預覽CSS3 border-radius(圓角)效果的工具。右側(cè)具有實時調(diào)試并顯示預覽效果的功能，同時能夠?qū)崟r生成對應的css3效果代碼，方便需要的朋友使用。2016-05-31利用CSS3的border-radius繪制太極及愛心圖案示例
CSS3中的border-radius可以輕松地用來繪制弧線,如果只用來做圓角矩形的話可就太浪費了,下面就來展示一下利用CSS3的border-radius繪制太極及愛心圖案示例,需要的朋友可以參2016-05-17- 這篇文章主要介紹了CSS3中border-radius屬性設定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設置弧度來制作其他弧線邊框圖形,需要的朋友2016-05-10
- 這篇文章主要介紹了實例講解CSS3中的border-radius屬性,是CSS3入門學習中的基礎知識,需要的朋友可以參考下2015-08-18
HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡單易上手
這篇文章主要介紹了HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡單易上手,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，2021-05-10
