1、border-radius 知識點：
1.1、簡單語法：
border-radius：length/persentage；
js語法：object.style.borderRadius="5px"
border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。4個角（順時針方向，左上，右上，右下，左下），每個角都有兩個半徑，水平半徑和垂直半徑，
如下圖所示demo，就是每個圓角的水平、垂直半徑都一樣。數值越大，圓角弧度就越大
<html>
<head>
<meta charset="utf-8"/>
<title>內凹圓角</title>
<style type="text/css">
div{
margin: 50px;
}
.test1{
border-radius:20px;
width: 100px;
height: 100px;
background: pink
}
.test2{
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
width: 100px;
height: 100px;
background: pink
}
.test3{
border-top-left-radius:10px;
border-top-right-radius:30px;
border-bottom-right-radius:40px;
border-bottom-left-radius:50px;
width: 100px;
height: 100px;
background: pink
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
</body>
</html>
這2種寫法是一樣的，test1是test2的縮寫，test3是不同的弧度演示
1.2、每個圓角都設置2組值，既水平半徑和垂直半徑不相同
語法：
border-radius:50px/10px;這樣是一次性設置4個圓角都是一樣的
依然沿用上面的html，
.test4{
border-radius:50px/10px;
width: 100px;
height: 100px;
background: pink
}
.test5{
border-radius:10px/50px;
width: 100px;
height: 100px;
background: pink
}
.test6{
border-radius:30px/50px;
width: 100px;
height: 100px;
background: pink
}
也可以針對每個圓角單獨設置，比如畫一個雞蛋
.test7{
width: 100px;
height: 120px;
background: pink;
border-radius:60px 60px 60px 60px/100px 100px 60px 60px;
}
2、css內凹圓角
工作中經常用用到，顯示圓角的按鈕圖片這種是比較簡單也常見的效果。如果要實現內凹的圓角形狀還是比較複雜的，例如這種
大概實現思路如下：
- 一個外層div，設置寬高，設置相對定位。
- 4個小的div，在外層div裏面，通過border-radius進行不同方法的圓角設置
- 爲這些小塊加上不同方位的邊框，通過對象定位，分別定位到外層div的
代碼如下：
<html>
<head>
<meta charset="utf-8"/>
<title>內凹圓角</title>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-top: 100px;
margin-left: 100px;
}
.wrap_left_top, .wrap_right_top, .wrap_left_bottom, .wrap_right_bottom {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid #fff;
z-index: 1;
background: pink;
}
.wrap_left_top {
top: -1px;
left: -1px;
border-radius: 0 0 40px 0;
border-bottom: 1px solid red;
border-right: 1px solid red;
}
.wrap_right_top {
top: -1px;
right: -1px;
border-radius: 0 0 0 40px;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
.wrap_left_bottom {
left: -1px;
bottom: -1px;
border-radius: 0 40px 0 0;
border-top: 1px solid red;
border-right: 1px solid red;
}
.wrap_right_bottom {
right: -1px;
bottom: -1px;
border-radius: 40px 0 0 0;
border-top: 1px solid red;
border-left: 1px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left_top"></div>
<div class="wrap_right_top"></div>
<div class="wrap_left_bottom"></div>
<div class="wrap_right_bottom"></div>
</div>
</body>
</html>
最後，把4個小塊的背景色去掉。就完成了
3、其他常用形狀
/*圓圈*/
.other1{
width: 100px;
height: 100px;
background: pink;
border-radius: 50%;
}
/*半圓*/
.other2{
width:50px;
height: 100px;
background: pink;
border-radius: 50px 0 0 50px;
}
/*扇形*/
.other3{
width: 100px;
height: 100px;
background: pink;
border-radius: 100% 0 0 0;
}
/*花瓣 旋轉一下也可以是水滴*/
.other4{
width: 100px;
height: 100px;
background: pink;
border-radius: 50% 50% 0 50%;
}
/*花瓣 旋轉一下也可以是水滴*/
.other5{
width: 100px;
height: 100px;
background: pink;
border-radius: 50% 50% 0 50%;
transform:rotate(45deg);
}
