摘要：老師講的非常好，通俗易懂，本節(jié)掌握了：利用border-radius屬性里面的4個值（solid,double,dashed,dotted）可展現(xiàn)不同的邊框效果,利用border-shadow屬性可實現(xiàn)外陰影與內(nèi)陰影效果。border-shadow屬性中包含4個值（第一個值代表x軸陰影位置，第二個值代表y軸陰影位置，第三個軸代表陰影寬度，第四個值代表陰影的顏色值）以下是我做的小案例效果：部分css
老師講的非常好，通俗易懂，本節(jié)掌握了：利用border-radius屬性里面的4個值（solid,double,dashed,dotted）可展現(xiàn)不同的邊框效果,利用border-shadow屬性可實現(xiàn)外陰影與內(nèi)陰影效果。border-shadow屬性中包含4個值（第一個值代表x軸陰影位置，第二個值代表y軸陰影位置，第三個軸代表陰影寬度，第四個值代表陰影的顏色值）
以下是我做的小案例效果：部分css屬性為了div在本頁中的展現(xiàn)效果特意加上去的，請老師忽略即可！
<!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">內(nèi)陰影</div>
</body>
</html>
批改老師：天蓬老師批改時間：2019-01-18 15:02:01
老師總結(jié)：盒模型中, 只有邊框和內(nèi)容是可見的, 除了能設(shè)置寬度外, 還可以設(shè)置樣式和顏色, 邊框還有很多非常有意義 的屬性, 例如設(shè)置圓角等