摘要：<!DOCTYPE html><html><head> <title>CSS 知识集</title> <style type="text/css"> body{background-image: url(http://img.php.cn/upload/article/000/000/003/5bf36b5
<!DOCTYPE html>
<html>
<head>
<title>CSS 知识集</title>
<style type="text/css">
body{background-image: url(http://img.php.cn/upload/article/000/000/003/5bf36b533beff297.png);background-repeat: no-repeat;background-position: center top;}
.bkys1{width: 300px;height:300px; border: 1px solid #ccc;}
.bkys2{width: 300px;height:300px; border: 1px double #ccc;}
.bkys3{width: 300px;height:300px; border: 1px dashed #ccc;}
.bkys4{width: 300px;height:300px; border: 1px dotted #ccc;}
.dbkys1{background:red;width: 300px;height: 300px;border-top: 10px solid #ccc}
.dbkys2{width: 300px;height: 300px;border-right: 10px solid #ccc;background:red;}
.dbkys3{width: 300px;height: 300px;border-left: 10px solid #ccc;background:red;}
.dbkys4{width: 300px;height: 300px;border-bottom: 10px solid #ccc;background:red;}
button{border:none;border-radius: 10px;}
.shadow{width:300px;height: 50px;box-shadow:0px 6px 30px #ccc inset ;}
.koutu{width: 50px;height:50px;background-image: url(http://img.php.cn/upload/article/000/000/003/5bf36b533beff297.png);background-repeat: no-repeat;background-position:-100px 0px;}
</style>
</head>
<body>
<h1>边框类</h1>
<div class="bkys1"></div>
<div class="bkys2"></div>
<div class="bkys3"></div>
<div class="bkys4"></div>
<div class="dbkys1"></div>
<div class="dbkys2"></div>
<div class="dbkys3"></div>
<div class="dbkys4"></div>
<button>登录</button>
<div class="shadow"></div>
<div class="koutu"></div>
</body>
</html>> 批改老师：查无此人批改时间：2019-01-12 09:13:10
老师总结：完成的不错。 可以把width: 300px;height: 300px;样式单独提出来。 比如 w300{ width: 300px; } , h300{ height: 300px; }， 这样可以减少代码量。
