border-radius 表示邊框圓角，經(jīng)常使用，一般就是給盒子設(shè)置個圓角或是寫個圓形，今天讓我們來深入了解一下radius~
先看一個圖：
不正經(jīng)的形狀
看到這么一個圖形，你的第一反應(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è)置一個borderRaius
- 寫兩個參數(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ù)
- 寫三個參數(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ù)
- 寫四個參數(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>
8個參數(shù)啦
是不是感覺亂七八糟的，也沒什么意思？
來舉個小栗子吧~
為了省事，沒整理代碼，將就著看個意思吧~
小栗子
