圆角边框

圆角边框

  至今为止，我们遇到的边框都是直角的，使用border-radius可以设置边框为圆角的，border-radius就是圆角边框的半径。

width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 20px;
background-color: pink;

  与padding一样，取不同个数的值，代表设置不同地方的圆角半径，如

取值个数	设置
1个，如border-radius: 20px;	设置四个角的圆角半径都为20px
2个，如border-radius: 10px 20px;	设置左上角和右下角这条对角线为10px,另一条对角线为20px
3个，如border-radius: 10px 20px 30px;	设置左上角为10px,右上角和左下角这条对角线为20px,右下角为30px
4个，如border-radius: 5px 10px 15px 20px	从左上角开始设置，按顺时针来，即左上角为5px,右上角为10px, …

  由第一张图，我们发现半径也分为水平半径和垂直半径，这两个也可以分别设置，用/分开当做两组，第一个用来设置水平半径，第二个设置垂直半径，如

width: 100px;
height: 120px;
margin: 0 auto;
border-radius: 50px / 60px; 
background-color: pink;

我们设置四个角的水平半径为50px,四个角的水平半径为60px,得到效果如下

如果不分开设置，则默认水平半径和垂直半径是相同的。