1.画圆(重点)
代码:
<!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>正方形内接圆</title>
<style>
.yuanxing{
width: 200px;
height: 200px;
background-color: pink;
/* 圆形的半径为正方形宽度的一半 */
/* border-radius: 100px; */
/* 50%就是宽度和高度的一半 等价于100px */
border-radius: 50%;
}
</style>
</head>
<body>
圆形的做法:
<div class="yuanxing"></div>
</body>
</html>
运行效果:
2.圆角矩形(重点)
代码:
<!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>正方形内接圆</title>
<style>
.juxing{
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
</style>
</head>
<body>
圆角矩形的做法:
<div class="juxing"></div>
</body>
</html>
运行效果:
3.设置不同圆角
代码:
<!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>正方形内接圆</title>
<style>
.radius{
width: 200px;
height: 200px;
/* 上左 上右 下右 下左 */
border-radius: 10px 20px 30px 40px;
background-color: pink;
}
</style>
</head>
<body>
3.可以设置不同的圆角:
<div class="radius"></div>
</body>
</html>
运行效果:
备注:
(1)如果是两个数值则为对角线的关系:
代码:
<!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>正方形内接圆</title>
<style>
.radius{
width: 200px;
height: 200px;
/* 上左 上右 下右 下左 */
border-radius: 10px 20px ;
background-color: pink;
}
</style>
</head>
<body>
3.可以设置不同的圆角:
<div class="radius"></div>
</body>
</html>
运行效果: