關於CSS之border屬性的詳細介紹

border的屬性

1.border-width：不支援百分比，支援關鍵字，thin（1px），medium（預設值，3px，預設值是3px的原因是只有當border是3px以上時，border-style才有效

　　　　 果實），thick（5px）

#2.border- style:有不同值，以下分析分別為不同值時的應用

　　a.solid：可以實現三角，梯形

nbsp;html>
    <title>用solid实现三角和梯形</title>
    <meta>
    <style>
        .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><p></p>我是三角形<p></p>我是梯形

　　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樣式程式碼。例如：

nbsp;html>
    <title>鼠标移动时边框颜色的改变</title>
    <meta>
    <style>
        .a{
            width: 30px;
            height: 30px;
            padding: 20px;
            margin:30px;
            color: red;
            border:1px solid;
        }
        .a:hover{
            color: blue;/*            border:1px solid;*/        }

    </style><p>哈哈</p>

4.利用border可以實現背景圖像的定位，因為背景圖像在定位時是不計算border的

5.利用border實現等高佈局，缺點是不支援百分比寬度

（4,5類似，都是利用border，使得與某側距離固定）

以上是關於CSS之border屬性的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！