摘要：<!DOCTYPE html> <html> <head> <title>css边框样式</title> <style type="text/css"> .box{ width: 100px;height: 100px; border:1px&nb
<!DOCTYPE html>
<html>
<head>
<title>css边框样式</title>
<style type="text/css">
.box{
width: 100px;height: 100px;
border:1px solid /*double双线*/ /*dashed虚线*/ /*dotted点*/ red;
background: #ccc;
}
.main{
width: 100px;height: 100px;
border-collapse: collapse; /*边框合并*/
border-top: 1px solid green;
border-left: 1px double green;
border-bottom: 1px dotted green;
border-right: 1px dashed red;
}
button{
border:none; /*清除按钮边框*/
border-radius: 50%; /*圆角*/
}
.show{
width: 300px;height: 40px;
background: yellow;
box-shadow: 0px 5px 30px red inset;
/*右 下 模糊度 颜色 向内(默认向外)*/
/*换方向就用负值*/
}
</style>
</head>
<body>
<div>
<div class="box"></div>
<div class="main"></div>
<button>登录</button>
<div class="show"></div>
</div>
</body>
</html>总结:没有过多动脑研究其他案例,也许是看的案例比较少,根据这节课简单做点笔记而已
批改老师：天蓬老师批改时间：2019-04-04 10:47:43
老师总结：边框的样式可以很复杂,但不建议做的太过于复杂了, 一定要统一, 简洁
