border-radius 表示邊框圓角务冕，經(jīng)常使用长酗，一般就是給盒子設(shè)置個圓角或是寫個圓形碱妆，今天讓我們來深入了解一下radius~
先看一個圖：
看到這么一個圖形唇牧，你的第一反應(yīng)是不是用canvas或是svg來實現(xiàn)？
那就想復(fù)雜啦~~來咨跌，讓我們看看border-radius是如何幫我們的
語法
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]
默認值：所有元素
適用于：所有元素
繼承性：無
動畫性：每個獨立屬性
計算值：每個獨立屬性取值
<length>:用長度值設(shè)置對象的圓角半徑長度，不允許負值
<percentage>:用百分比設(shè)置對象的圓角半徑長度硼婿，不允許負值說明
設(shè)置或檢索對象使用圓角邊框锌半。提供2個參數(shù)，2個參數(shù)以“/”分隔寇漫，每個參數(shù)允許設(shè)置1~4個參數(shù)值刊殉，第1個參數(shù)表示水平半徑殉摔，第2個參數(shù)表示垂直半徑，如第2個參數(shù)省略记焊，則默認等于第1個參數(shù)-
兼容性
Firefox從13.0開始移除對-moz-的支持逸月，僅支持標準的border-radius寫法，在4.0-12.0區(qū)間遍膜，兩種方式都支持碗硬。
兼容性 示例
- 只寫一個參數(shù)，則將四個角都設(shè)置為該值
<style>
/* Css */
#box{
width:100px;
height: 100px;
border: 3px solid #4caf50;
border-radius: 20px;
}
</style>
<!-- Dom 結(jié)構(gòu) -->
<div id="box"></div>
運行結(jié)果如下圖
- 寫兩個參數(shù)
<style>
/* Css */
#box{
width:100px;
height: 100px;
border: 3px solid #4caf50;
border-radius: 20px 40px;
}
</style>
<!-- Dom 結(jié)構(gòu) -->
<div id="box"></div>
運行結(jié)果如下圖：第一個參數(shù)設(shè)置左上角和右下角捌归，第二個參數(shù)設(shè)置右上角和左下角肛响，是一個對角關(guān)系。
- 寫三個參數(shù)
<style>
/* Css */
#box{
width:100px;
height: 100px;
border: 3px solid #4caf50;
border-radius: 20px 40px 60px;
}
</style>
<!-- Dom 結(jié)構(gòu) -->
<div id="box"></div>
當設(shè)置了三個參數(shù)的時候惜索，第一個值表示左上角特笋，第二個值表示右上角和左下角，第三個值表示右下角
- 寫四個參數(shù)的時候巾兆，就不解釋了...
5.設(shè)置8個參數(shù)的時候猎物，就好玩啦~~~
<style>
/* Css */
#box{
width:100px;
height: 100px;
border: 3px solid #4caf50;
border-radius: 30px 10px 60px 20px/70px 30px 50px 10px;
}
</style>
<!-- Dom 結(jié)構(gòu) -->
<div id="box"></div>
是不是感覺亂七八糟的，也沒什么意思角塑？
來舉個小栗子吧~
為了省事蔫磨，沒整理代碼，將就著看個意思吧~
