border屬性黑科技（已被玩壞）

我們經常給一個都是這樣使用border的，border: 1px solid red;

這次我們來看看不同的情況

    <div class="cDiv1"></div>
    <div class="cDiv2"></div>
    <div class="cDiv3"></div>
    <div class="cDiv4"></div>

    div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        float: left;
        margin-left: 20px;
    }
    .cDiv1{
        border: 10px solid red;
    }
    .cDiv2{
        border: 10px solid;
    }
    .cDiv3{
        border: solid red;
    }
    .cDiv4{
        border: 10px red;
    }

結果如下：

由此我們得出了結論，

• border-style屬性必不可少
• border-color屬性默認爲黑色
• border-width屬性默認是3px

在此基礎上，我們可以這樣玩

    <div class="cDiv1"></div>
    <div class="cDiv2"></div>
    <div class="cDiv3"></div>
    <div class="cDiv4"></div>
    <div class="cDiv5"></div>

    div{
        width: 0px;
        height: 0px;
        float: left;
        margin-left: 20px;
        border-width: 20px;
        border-style: solid;
    }
    .cDiv1{
        border-color: red green blue #333;
    }
    .cDiv2{
        border-color: transparent transparent transparent #333;
    }
    .cDiv3{
        border-color: red transparent transparent transparent;
    }
    .cDiv4{
        border-color: transparent green transparent transparent;
    }
    .cDiv5{
        border-color: transparent transparent blue transparent;
    }

結果如下：

還可以這樣玩，設置border-radius

然後我又玩壞了，感覺像wifi && 鑽石

其實如果夠睿智，可以用它們做好多效果….