CSS深入理解之邊框-html教學-PHP中文網

CSS深入理解之邊框

迷茫

發布： 2017-03-25 10:28:47

原創

1300 人瀏覽過

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中文網其他相關文章！