--边界边框
-----外边距：margin 上 top 右 left 下 bottom 左 right
-----内边距：padding 上 top 右 left 下 bottom 左 right
-----边框：border
----------------------------------透明 transparent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#first{
width: 200px;
height: 200px;
background-color: red;
margin: 30px 40px 50px 60px;
}
#second{
width: 200px;
height: 200px;
background-color: red;
}
#third{
/*width: 200px;*/
width: 170px;
height: 200px;
background-color: orange;
padding-left: 30px;
}
#forth{
width: 300px;
height: 200px;
/*border-right: 1px solid black;*/
border-top: 10px solid red;
border-right: 10px solid red;
}
#fifth{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 100px solid transparent;
}
#sixth{
width: 200px;
height: 200px;
background-color: red;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="forth">
</div>
<div id="fifth">
</div>
<div id="sixth">
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/mjwwzy/p/8983081.html
时间： 2024-10-12 12:38:41