關於CSS之border屬性的詳細介紹
- 高洛峰原創
- 2017-03-19 14:30:242337瀏覽
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><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，使得與某側距離固定）
以上是關於CSS之border屬性的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn