【前端小技巧】border-raduis小技巧

定義

border-radius: length|% (能夠設置寬度／百分比);
border-radius: 1-4 length|% (四個角：左上，右上，右下，左下 即順時針方向);
border-radius: 1-4 length|% / 1-4 length|%(水平方向／垂直方向);

特性

1.當任意兩個相鄰圓角的半徑之和大於border box的尺寸時，用戶代理必須按比例減小各個半徑所使用的值，直到他們不會重疊
2.大值特性：值很大的時候，只會使用可以渲染的圓角大小渲染
3.等比例特性：水平半徑和垂直半徑比例恆定不變

步驟
1.半徑100px圓形四個角設置60px

border-radius:60px;
border-radius:60px 60px 60px 60px;
border-radius:60px 60px 60px 60px /60px 60px 60px 60px;

上圖，若是給圓設置60px的border-radius 應該是藍色框框的位置，但由於左下和右下有重疊，所以按比例減小直到二者不會重疊，減小以後就是綠色框框的效果，由於給半徑爲100px的div設置border-radius，無論是50px仍是60px效果是同樣的。

2.圓形橫向60px，縱向50px

border-radius:60px/50px;
border-radius:60px 60px 60px 60px /50px 50px 50px 50px;

上圖，由於橫向60px已經超過了橫向半徑50px,須要減小至50px,根據上面的等比例特性，縱向50px須要按照橫向的60/50的比例縮小，呈現的效果就是上圖的效果。

3.橢圓四個角設置50%圓角

border-radius:50%;
border-radius:50% 50% 50% 50% /50% 50% 50% 50%;

4.四個角設置一樣的橫向及縱向百分比

border-radius:50%/40%

5.四個角設置50% 30% 30% 50%／30% 50% 50% 30%圓角

border-radius:50% 30% 30% 50%／30% 50% 50% 30%;

6.若是某個角某個方向設置成0則該角是直角；同一方向上鄰邊相加大於100%，則按比例分配

border-radius: 50%/0 100% 25% 0;
border-radius: 50% 50% 50% 50%/0 100% 25% 0;

上圖中，由於左上 左下已經有一個方向設置爲0，所以該兩個方向是直角，右上和右下方向橫向上均佔50%，可是縱向，二者相加已經超過100%會有重疊。所以會按照100:25的比例分配二者的佔比。

7.【半個橢圓】橫向：四個角50%，縱向：某兩個相鄰的角100%，其餘兩個角0

border-radius: 50%/100% 100% 0 0;
border-radius: 50% 50% 50% 50%/100% 100% 0 0;

8.三個直角1

border-radius: 100%/100% 0 0 0
border-radius: 100% 100% 100% 100%/100% 0 0 0;

雖然上圖中圖形橫向上佔比都是100%,由於相鄰方向相加超過100%，所以各邊分配的橫向均是50%，雖然左上角在縱向上分配100%，但由於橫向：縱向比要永遠保持100%：100%即1:1。所以縱向仍然佔比50%。

9.三個直角2

border-radius: 50%/100% 0 0 0;
border-radius: 50% 50% 50% 50%/100% 0 0 0;

10.【1/4橢圓】某個方向橫向縱向100%，其餘三個方向不設置

border-radius: 100% 0 0 0;
border-radius: 100% 0 0 0/100% 0 0 0;

11.在剛纔全部實現的基礎之上添加border會有小驚喜哦～

border-radius: 100% 0 100% 0;
background-color: transparent;
border-top:10px solid red;