核心：margin:100px auto;核心在于有两个参数，第一个为上下，第二个为左右，，上下代表上下都为100哈，
问题？为什么下也为100px呢，因为你看哈
怎么实现的呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
#container{
width: 100%;
height: 100vh;
margin:100px auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<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>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
</div>
</body>
</html>
border-radius: 50%;意思是什么？
意思是左上角 右上角 右下角 左下角，都为50%，代表什么？代表每一个角（左上角 右上角 右下角 左下角）的垂直水平为50%哦，
这里.box2那里的哦，border-radius: 50px 50px 0 0;代表左上角50px 右上角50px 右下角0 左下角为0
剩下的大家举一反三把，border-radius: 100px / 50px;代表四个角都水平400px垂直50px的变化。我看也没有什么了，到此为止把，拜拜。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
#container{
width: 960px;
margin:100px auto;
}
.box1{
width: 300px;
height: 300px;
border:5px solid red;
background-color: #abcdef;
/*border-radius: 100px;*/
border-radius: 50%;
/*border-radius: 200px;*/
}
.box2{
width: 100px;
height: 50px;
background-color: #f80;
border-radius: 50px 50px 0 0;
margin:50px;
}
.box3{
width: 100px;
height: 50px;
background-color:pink;
border-radius: 0 0 50px 50px;
margin:50px;
}
.box4{
width: 100px;
height: 200px;
background: green;
border-radius: 100px 0 0 100px;
}
.box5{
width: 100px;
height: 200px;
background:blue;
border-radius: 0 100px 100px 0;
}
.box6{
width: 100px;
height: 100px;
background-color: #abcdef;
border-radius: 100px 0 0 0;
}
.box7{
width: 100px;
height: 100px;
background-color: #abcdef;
border-radius: 0 100px 0 0;
}
.box8{
width: 100px;
height: 100px;
background-color: #abcdef;
border-radius: 0 0 100px 0;
}
.box9{
width: 100px;
height: 100px;
background-color: #abcdef;
border-radius: 0 0 0 100px;
}
.box10{
width: 200px;
height: 100px;
background-color: pink;
border-radius: 100px / 50px;
}
.box11{
width: 100px;
height: 200px;
background-color: pink;
border-radius: 50px / 100px;
}
</style>
</head>
<body>
<div id="container">
<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>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
</div>
</body>
</html>
原创文章 107
获赞 14
访问量 1351