這篇文章主要介紹標題中三個屬性獨特的一面。不獨特你打我）:

一、border

  其實對於border,想必大家已經瞭解很多了。所以我就不囉嗦太多的基本東西。

  比如border-radius我們只需要看這張圖:

  現在我們來看看border的真實面貌：

    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: rgb(222,11,22);
    border-left-color: rgb(20,100,200);
    border-right-color
 
: rgb(1,200,200);
    border-bottom-color: rgb(100,20,200);

  利用這一點我們能做出什麼呢？微信的訊息框：

    position: relative;
    width: 150px;
    height: 50px;
    background: #fff;
    border-radius: 5px;
    line-height: 50px;
    &::after {
        content: "";
        display: block;
        position: absolute;
        width
 
: 0;
        height: 0;
        border: 10px solid transparent;
        border-right-color: #fff;
        top: 15px;
        left: -20px;
    }

  你看看以後再遇到用小三角的，是不是so easy! 哪怕是要用兩個。可能講到這裡，不少同學就很不樂意了，這些明明我多懂。來個新鮮的行不行？客官往下看：

  what?別告訴我這也是用border畫的！心細的同學應該會看出來，這不就是dashed的樣式嗎？的確是用了dashed，但是我們多知道dashed這個樣式，我們不能修改它虛線的間距，這點很頭疼。所以這裡這個圖案出現的有那麼一點碰巧，但是它揭露了背景顏色會滲透到border的下面。

  所以，當你要實現一個半透明的邊框時，並不是一個容易的事，你還需要結合background-clip。

  聰明的同學又要問了，你這個圖案實現的太巧合了，在很多情況下，dashed並不能像我們預期的那樣。哈哈。接下來從box-shadow的講解中，我會給你個十全十美的方案。

二、box-shadow

  這裡我就不說什麼單邊陰影，雙邊陰影了。直接接著上面的話題吧。要實現上面的圖案，首先你要明白，box-shadow是支援逗號分隔語法的。不賣關子，看程式碼:

    width: 100px;
    height: 100px;
    background: rgb(200,100,200);
    box-shadow: 40px 0 0 -20px rgb(200,100,200),
                -40px 0 0 -20px rgb(200,100,200),
                0 40px 0 -20px rgb(200,100,200),
                0 -40px 0 -20px rgb(200,100,200);

  我靠！陰影的尺寸還能是負數，是不是很驚訝。實際上，當陰影為負數時，陰影向內擴散，是不是很神奇，是不是很完美。

  這裡我們還可以利用box-shadow來製造圖片翹邊的效果，這裡我們要結合transform。

    position: relative;
    width: 240px;
    height: 320px;
    background: url(../assets/images/head.jpeg) no-repeat center / 240px 320px;
    border: 5px solid #fff;
    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 150px;
        left: 70px;
        width: 150px;
        height: 150px;
        box-shadow: 5px 5px 15px 10px rgb(213,213,213);
        transform: skewX(20deg) rotate(15deg);
        z-index: -100;
    }

    &::after {
        content: "";
        display: block;
        position: absolute;
        top: 18px;
        left: 12px;
        width: 150px;
        height: 150px;
        box-shadow: 0 0 15px 10px rgba(0,0,0,.2);
        transform: skewX(20deg) rotate(15deg);
        z-index: -100;
    }

  這裡我們要記住一點，無論你用box-shadow像外擴充套件了多少，並不影響元素本身的大小。

三、outline

  與box-shadow相似的是，它的大小也不影響元素的大小。這裡可能需要講的，就是不要忽略outline-offset，而且它可以取負值。

    width: 100px;
    height: 100px;
    outline: 10px solid rgb(110,110,110);
    outline-offset: -45px;
    border: 10px solid rgb(110,110,110);
    border-radius: 50%;

覺得不錯的同學，來一波關注吧，您的關注就是我寫作的動力。
更多文章：簡書
更多精彩：GitHub