<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style/01_06_border.css">
</head>
<body>
1.設置border-style屬性
<div id="b1"></div>
2.只設置border-color、border-width屬性（tip：如不設置border-type屬性，默認爲none）
<div id="b2"></div>
3.設置border屬性，完爆上面的屬性
<div id="b3"></div>
<hr />
!!border屬性有多個同類屬性值時，其值遵循上、右、下、左的次序渲染。
<hr />
4.設置上、右、下、左邊框相同的屬性
<div id="b4"></div>
5.設置兩類屬性：（1）上、下邊框相同（2）左右邊框相同
<div id="b5"></div>
6.設置三類屬性：（1）上邊框（2）左、右邊框相同
<div id="b6"></div>
</body>
</html>
#b1{
width: 50px;
height: 50px;
background: green;
border: solid;
}
#b2{
width: 50px;
height: 50px;
background: green;
border: red 3px;
}
#b3{
width: 50px;
height: 50px;
background: green;
border: dotted red 5px;
}
/*我是分割線————————————————————————————————————————*/
#b4{
width: 50px;
height: 50px;
background: green;
border: solid yellow 3px;
}
#b5{
width: 50px;
height: 50px;
background: green;
border-style: solid dotted;
border-color: red blue;
}
#b6{
width: 50px;
height: 50px;
background: green;
border-style: solid double dotted ;
border-color: red yellow blue;
}
![]()
