摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS作业</title> <style> * { margin: 0; padding: 0; } #main{ width
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS作业</title>
<style>
* {
margin: 0;
padding: 0;
}
#main{
width: 400px;
border: 1px solid #ccc;
}
.boxpadding{
width: 300px;
height: 100px;
background: pink;
padding: 10px 15px 20px 15px;
border: 1px dashed red;
}
.boxmargin{
width: 300px;
height: 100px;
background: green;
margin: 10px auto;
border: 3px double blue;
}
.boxborder{
width: 300px;
height: 100px;
background: #ccc;
padding: 10px;
margin: 10px;
border: 1px dotted black;
box-shadow: 5px 5px 8px #ccc;
}
button{
width: 300px;
height: 100px;
border-radius: 5px;
margin: 10px;
box-shadow: 0px 5px 200px #faa51a inset;
color: white;
border: none;
}
</style>
</head>
<body>
<div id="main">
强制内外边框都是0
<div>测试内边距，上10，下20，左右各15<br>边框为红色虚线<br>内边距为内容与边框之间的距离</div>
<div>测试外边距，上下为10，左右居中<br>外框为蓝色双线<br>外边距为边框和其他东西的距离</div>
<div>测试边框阴影，外边距10，内边距10<br>边框为黑色点线<br>阴影为x轴5，y轴5，宽度8</div>
<button>测试按钮过渡色</button>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-14 09:19:02
老师总结：基础学习，比较重要，但是比较枯燥，要继续保持奥！后面的学习会越来越精彩
