摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 边框 */
.box{border: 2px solid rebeccapurple;width: 300px;height: 250px;border-radius:5px}
.box{border: 2px dashed rebeccapurple;}
.box{border: 2px double rebeccapurple;}
/*
单边边框：border-top;border-bottom;border-left;border-right
圆边角：border-radius
*/
/* 边距 */
span,p{width: 100px;height: 100px;background-color: rebeccapurple;}
span{padding: 2px 10px 10px 5px}/* 上 右 下 左*/
p{padding: 2px 10px}/* 上下 左右*/
span{margin: 2px 4px;}
p{margin: 24px;}/* 上下左右*/
/*3D阴影 */
.content{width: 500px;height: 50px;border: 3px dashed #666;
box-shadow:15px 28px 10px red; /*X轴 Y轴 阴影宽度 颜色*/
box-shadow:15px 28px 10px red inset; /*X轴 Y轴 阴影宽度 颜色 [向内阴影]*/
}
/* demo style */
h3{width: 100%;text-align: center;font-size: 20px;}
.div1{width: 80%;height: 400px;border-bottom: 1px solid red;border-top: 2px dashed #666;margin: 0 auto}
.div2{width:150px;height: 50px;margin-top: 15px;padding: 2px 10px;border: 1px saddlebrown solid;border-bottom: 2px double red }
.div3{width: 100px;height: 100px;border: 1px red solid;border-radius:10px ;}
.div4{width: 80%;height: 40px;border: 1px dashed red;margin-top: 10px;}
.div4{box-shadow: 0px 22px 4px red inset}
</style>
</head>
<body>
<div class="box"><span>hello Word</span> <p>hello Word</p> </div>
<div class="content" style="margin-top: 5px"> </div>
<h3>demo</h3>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
