核心： border-radius: 60px 40px 20px 10px /30px 20px 10px 5px;是什么？ /第一个是60 30是左上角把，是水平60垂直30.。/ 依次比较 border-radius: 40px;代表什么？ 代表左上角 右上角 右下角 左下角四个都水平垂直为40px。 border-width: 20px 30px 0px 50px;代表上 右 下 左哈 border-color: pink blue pink blue;代表上 右 下 左哈 核心在于最核心来了 都是以border为基点的哈因为它叫做border-radius嘛是吧
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container div
{
width: 100px;
height: 100px;
border: 3px solid red;
background-color: red;
margin: 10px;
}
.box1
{
border-radius: 60px 40px 20px 10px /30px 20px 10px 5px;
}/*第一个是60 30是左上角把，是水平60垂直30.。*/
#container .box2
{
border: 20px solid red;
border-radius: 40px;
}
#container .box3
{
border-style: solid;
border-width: 20px 30px 0px 50px;
border-color: pink blue red blue;
}
#container .box4
{
width: 500px;
height: 100px;
border-style: solid;
border-width: 60px 30px 60px 30px;
border-color: pink blue pink blue;
}
#container img
{
width: 150px;
height: 150px;
border: 5px solid red;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"><img src="./1.jpg"></div>
</div>
</body>
</html>
