摘要:<!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>盒模型</title>
<style>
*{padding:0;margin: 0;}
.box{
height: 100px;width: 100px;border: 1px dotted #ff6500;margin: 20px;
box-shadow: 0px 10px 27px #ccc inset;;
}
button{
border: 1px solid red;border-radius: 50%;height: 20px;line-height: 20px;
box-shadow: 3px 2px 5px #ff6500;
}
.shadow{
height: 50px;width: 50px;box-shadow: 5px 5px 7px #ccc ;
border: 1px solid ;margin: 25px;
}
</style>
</head>
<body>
<div class="box">
<div class="shadow"></div>
</div>
<button>登录</button>
</body>
</html>
批改老师:天蓬老师批改时间:2019-02-13 12:21:55
老师总结:边框样式设置重点在于简化规则, 边框与内外边距不同, 他是有样式的, 而margin/ padding只能设置宽度, 因为他们是透明不可见的, 所以,边框除了宽度,还可以设置样式, 颜色等