border的屬性
1.border-width：不支援百分比，支援關鍵字，thin（1px），medium（預設值，3px，預設值是3px的原因是只有當border是3px以上時，border-style才有效
果實），thick（5px）
2.border-style:有不同值，下面分析分別為不同值時的應用
a.solid：可以實現三角，梯形
<!DOCTYPE html><html><head>
<title>用solid实现三角和梯形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0px;
height: 0px;
border-style:solid;
border-width: 50px;
border-color: red transparent transparent transparent;
}
.trapezia{
width: 40px;
height: 40px;
border-style: solid;
border-width: 50px;
border-color:transparent transparent green transparent ;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="triangle"></div>我是三角形
<div class="trapezia"></div>我是梯形
</body>
</html>b.dashed:虛線，在chrome/Firefox瀏覽器中，虛線和實線的比例是3:1（稀），在IE瀏覽器中，比例是2：1（密）
c.dotted:點線，在chrome/Firefox瀏覽器中，是方點，在IE瀏覽器中，是圓點（可以利用圓點實現圓角效果）
d.double:雙線,計算規則，雙線寬度永遠相等，中間間隔+-1，例如，3px=1（內）+1（中間間隔）+1（外），可以實現三道槓圖形。
e.inset（內凹）,outset（外凸）,ridge（溝槽）:風格過時，相容性差，沒有什麼使用場景
3.border-color：在不指定color時，使用color作為邊框色，可以利用此特性，簡化連結改變顏色時的css樣式程式碼。例如：
<!DOCTYPE html><html><head>
<title>鼠标移动时边框颜色的改变</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 30px;
height: 30px;
padding: 20px;
margin:30px;
color: red;
border:1px solid;
}
.a:hover{
color: blue;/*
border:1px solid;*/
}
</style>
</head>
<body>
<p class="a">哈哈</p>
</body>
</html>4.利用border可以實現背景圖像的定位，因為背景圖像在定位時是不計算border的
5.利用border實現等高佈局，缺點是不支援百分比寬度
（4,5類似，都是利用border，使得與某側距離固定）
以上是CSS深入理解之邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
