abstract：老师讲的非常好，通俗易懂，本节掌握了：利用border-radius属性里面的4个值（solid,double,dashed,dotted）可展现不同的边框效果,利用border-shadow属性可实现外阴影与内阴影效果。border-shadow属性中包含4个值（第一个值代表x轴阴影位置，第二个值代表y轴阴影位置，第三个轴代表阴影宽度，第四个值代表阴影的颜色值）以下是我做的小案例效果：部分css
老师讲的非常好，通俗易懂，本节掌握了：利用border-radius属性里面的4个值（solid,double,dashed,dotted）可展现不同的边框效果,利用border-shadow属性可实现外阴影与内阴影效果。border-shadow属性中包含4个值（第一个值代表x轴阴影位置，第二个值代表y轴阴影位置，第三个轴代表阴影宽度，第四个值代表阴影的颜色值）
以下是我做的小案例效果：部分css属性为了div在本页中的展现效果特意加上去的，请老师忽略即可！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css边框效果</title>
<style>
.one{
width: 200px;
height: 200px;
border-top: 2px double blue;
border-right:2px dashed lightseagreen;
border-bottom:2px dotted lawngreen;
border-left: 2px solid red;
float: left;
margin-right: 10px;
text-align: center;
line-height: 200px;
}
.two{
width: 200px;
height: 200px;
float: left;
border: 1px solid #f60;
border-radius: 15px;
margin-right: 10px;
text-align: center;
line-height: 200px;
}
.three{
width: 200px;
height: 200px;
float: left;
border: 1px solid lightseagreen;
border-radius: 100px;
margin-right: 10px;
text-align: center;
line-height: 200px;
}
.four{
width: 200px;
height: 200px;
border: 1px solid #ccc;
float: left;
background: lightcoral;
box-shadow: 2px 2px 6px #ccc;
text-align: center;
line-height: 200px;
}
.nav{
width: 600px;
height: 35px;
border: 1px solid #11C2EE;
border-radius: 5px;
float: left;
margin-top: 15px;
box-shadow: 2px 2px 25px #ccc inset;
text-align: center;
line-height: 35px;
}
</style>
</head>
<body>
<div class="one">四个边框效果不同</div>
<div class="two">圆角效果</div>
<div class="three">圆形效果</div>
<div class="four">外阴影</div>
<div class="nav">内阴影</div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-01-18 15:02:01
Teacher's summary：盒模型中, 只有边框和内容是可见的, 除了能设置宽度外, 还可以设置样式和颜色, 边框还有很多非常有意义 的属性, 例如设置圆角等