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><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</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，使得與某側距離固定）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
