1. 程式人生 > >CSS並不簡單--走進border、box-shadow和outline

CSS並不簡單--走進border、box-shadow和outline

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

一、border

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

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

image

  現在我們來看看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);
image

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

image
    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! 哪怕是要用兩個。可能講到這裡,不少同學就很不樂意了,這些明明我多懂。來個新鮮的行不行?客官往下看:

image

  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。

image
    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%;
image

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