摘要：<!doctype html> <html> <head> <meta charset="utf-8"> <title>学习css第三节课 ————边框</title> <style type="text/css"> .box
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>学习css第三节课 ————边框</title>
<style type="text/css">
.boxOne{width: 100px;height: 100px;border:1px dashed #12F53A}
.boxTwo{width: 120px;height: 140px;border:3px solid #2E15E3 ;border-radius: 30px;}
.boxThree{width: 200px;height: 300px;border:2px double #F17A0C;border-radius: 10px;}
.mainOne{width: 120px;height: 200px;border-top:5px dashed #15E2EF;border-right: 5px dotted #491DAB; background: #A78F90;}
button{width: 100px;height: 50px; border: none;background: #F15708;border-radius: 5px;}
.shadowOne{width: 300px;height: 50px;box-shadow: 5px 5px 3px #2E15E3;border: 1px solid #27836E}
.shadowTwo{width: 350px;height: 100px;box-shadow: 0px 6px 15px blue; }
.shadowThree{width: 400px;height: 150px;box-shadow:6px 60px 250px #F17A0C inset;}
.top{font-size: 35px;color: blueviolet;}
</style>
</head>
<body>
<div class="top">
<p>
本节课学习了边框的内容和使用方法：
<ul>
<li>
border属性里有四种显示边框的样式：solid、double、dashed、dotted。
</li>
<li>
学习了border-top、border-left、border-buttom、border-right这四个属性的作用和使用方法。
</li>
<li>
学习了border-radius属性的作用和使用方法。
</li>
<li>
学习了box-shadow属性的作用和使用方法。
</li>
</ul>
下面是做了一些巩固练习的小案例加深对css边框的理解。
</p>
</div>
<div class="boxOne"></div>
<br>
<div class="boxTwo"></div>
<br>
<div class="boxThree"></div>
<br>
<div class="mainOne"></div>
<br>
<button>登录</button>
<br>
<div class="shadowOne"></div>
<br>
<div class="shadowTwo"></div>
<br>
<div class="shadowThree"></div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-27 15:02:59
老师总结：box-shadow:6px 60px 250px #F17A0C inset, 这样的样式规则, 要注意,并没有得到所有浏览器的支持,要注意
