圆角设置
border-radius属性
border-radius属性的值通常为px单位，表示圆角的半径。
border-radius属性可以单独设置四个圆角 border-radius: 左上 右上 右下 左下。
小属性用来层叠大属性
| 属性 | 意义 |
|---|---|
| border-top-left-radius | 左上角 |
| border-top-right-radius | 右上角 |
| border-bottom-left-radius | 左下角 |
| border-bottom-right-radius | 右下角 |
百分比为单位
border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里
正方形盒子如果设置的border-radius属性为50%，就是正圆形。
长方形盒子如果设置的border-radius 属性为50%，就是椭圆形
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width:200px;
height:200px;
border:2px solid black;
border-radius:10px;
margin-bottom:20px;
}
.box2 {
width:200px;
height:200px;
border:2px solid rgba(0, 0, 0, 0.251);
border-radius:10px;
/* 设置圆角 */
margin-bottom:20px;
}
.box3 {
width:200px;
height:200px;
border:2px solid black;
border-radius:1000px;
}
.box4 {
width:200px;
height:200px;
border: 1px solid #000;
/* 简写形式同时设置四个不同圆角 */
border-radius:20px 40px 50px 60px;
}
.box5 {
width:200px;
height:200px;
border: 1px solid #000;
border-radius:40px;
/* 小属性层叠大属性设置不同于其他的圆角 */
border-top-left-radius:0;
}
.box6 {
width:200px;
height:200px;
border: 1px solid #000;
/* 正方形设置50%形成圆形 */
border-radius:50%;
}
.box7 {
width:200px;
height:400px;
border: 1px solid #000;
/* 长方形设置50%形成椭圆形 */
border-radius:50%;
}
.box8 {
/* 半径大于宽高的最小值则形成胶囊型，在增大半径也没有效果 */
width:200px;
height:400px;
border: 1px solid #000;
border-radius:200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</body>
</html>
