设置圆角我们会用到border-radius属性
例如以下代码
<!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>
.box {
width: 200px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>它的效果图是是一个宽200px 高100px 背景颜色是青色的的一个矩形。
border-radius 用来设置圆角
borde-top-right-radius 设置右上角的弧度
border-top-left-radius 设置左上角的弧度
border-bottom-left-radius 设置左小角的弧度
border-bottom-right-radius 设置右下角的弧度
例如我们设置上面的矩形右上角的弧度
.box {
width: 200px;
height: 100px;
background-color: #bfa;
border-top-right-radius: 20px;
}效果如图：
它的弧度就相当于以20px为半径的1/4圆
设置其它角的弧度也是一样
它的后面也可以跟多个值 例如4个值
.box {
width: 200px;
height: 100px;
background-color: #bfa;
border-radius:10px 20px 30px 40px;
}它的效果：
顺序是 左上 右上 右下 左下
例如3个值
.box {
width: 200px;
height: 100px;
background-color: #bfa;
border-radius:10px 20px 30px ;
}它的效果：
顺序是左上 （右上=左下） 右下
例如跟两个值：
.box {
width: 200px;
height: 100px;
background-color: #bfa;
border-radius: 20px 30px;
}效果如图：
顺序是（左上=右下）（右上=左下 ）
一个值的话就是四个角都是这个值
那学了border-radius 我们怎么设置一个圆呢？其实很简单。
我们只需先设置一个正方形 然后将他的圆角都变成50%
.box {
width: 200px;
height: 100px;
background-color: #bfa;
border-radius: 20px 30px;
}效果如图：
那半圆怎么设置呢？ 各位想一想。