详解：24 圆角的变化，对你的加深margin理解可能会有可能

贵哥的编程之路

发布于 2020-10-28 12:12:22

3360

发布于 2020-10-28 12:12:22

文章被收录于专栏：用户7873631的专栏

核心：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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/04/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

auto