content ott 現在 修改 缺點 顏色 b- 固定 瀏覽器

border屬性是在實際的應用中使用頻率比較高的一個屬性，除了作為邊框使用，利用border屬性的一些特征以及表現方式，可以在實現一些比較常見的效果（如等高布局，上下固定內容滾動布局和繪制CSS圖標等），利用css3新增的屬性值（如使用圖片填充邊框）可以實現一些更復雜的效果。

本文不介紹border的屬性的基本應用方法，將直接介紹如何通過border屬性實現一些常見的效

利用border畫三角形和梯形等多邊形

在CSS中，常見的平面圖形為矩形以及圓形。但是難免有些情景需要我們利用CSS去繪制三角形、梯形和平行四邊形等。此時我們可以利用border在渲染時的一些表現特點來實現這些功能。以下講解如何一步一步得到三角形。

首先我們寫一個div，樣式如下

 .border {
     width: 200px;   
     height: 100px;   
     margin: 0 auto;   
     border-top: 40px solid red;   
     border-bottom: 40px solid green;   
     border-left: 40px solid yellow;   
     border-right: 40px solid blue;   
 }

View Code

瀏覽器渲染後效果如下：

我們發現，通過給div的四個邊框設置不同的顏色，其渲染後的表現形式為四個梯形組成的邊框。

如果我們把高度定義為0，那麽渲染後如下：

如果我們再把寬度設置為0，結果如下：

到此為止，通過對比以上定義的不同的樣式，我們發現，在CSS中，邊框的表現實際上以梯形的形式來渲染的（這可能與groove等3D效果的屬性值有關，具體沒去深入研究）。當元素的寬高為0時就會變成擠在一起的四個三角形。因此，我們可以想到，如果把其中的三個邊框的顏色定義為透明色transparent,然後通過包裹在一個外層容器上，並給外層容器設置overflow:hidden，那麽我們將得到一個等腰梯形或者三角形。現在我們把css修改如下：

<div class="box">
    <
 
div class="border">

    </div>
</div>

View Code

        .box{
            width: 200px;
            height: 200px;
            margin: auto;
            overflow: hidden;
        }
        .border{
            margin: 0 auto;
            border-top: none;
            border-bottom: 40px solid green;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
        }

View Code 我們將得到以下梯形：

將樣式設置為如下：

<div class="border">

</div>

View Code

        .border{
            width: 0;height: 0;
            margin: 0 auto;
            border-top: 0 solid transparent;
            border-bottom: 100px solid green;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
        }

View Code

我們將得到以下三角形：

由於所有的二維多邊形可以劃分為多個三角形組成，加上border這種表現形式的基礎，我們可以通過設置不同邊框寬度值、顏色以及借住偽元素或者多個元素的拼接可以實現更為復雜的一些圖形，理論上我們可以用CSS繪制任何的多邊形。比如多角星，菱形，以及我們常見的聊天氣泡等。

利用border實現左右兩欄等高布局

實現這種布局有很多解決方案，比如利用padding和margin相互抵消的方法即可實現。但是如果利用border來實現的話，可能可以使CSS更加簡潔，適用性和兼容性也會更高。比如針對第一張圖的效果，我們有如下html結構。

<div class="menu">
    <ul>
        <li>首頁</li>
        <li>商品管理</li>
        <li>營銷中心</li>
        <li>會員管理</li>
        <li>系統設置</li>
    </ul>
</div>
<div class="content">這裏是內容區域</div>

View Code

.menu {
    float: left;
    width: 200px;
    color:  #FFF;
}
.content {
    border-left:  200px solid #40403b;/*這裏是主要的樣式*/
    padding: 20px;
    height: 1000px; /* 這裏代表內容區域 */
}

View Code

由於border寬度不支持百分比值，所以這種實現方法的缺點是難以直接做到左右兩側寬度按比例自適應。

2017年總結的前端文章——border屬性的多方位應用和實現自適應三角形