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

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

1、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);
複製代碼

  利用這一點咱們能作出什麼呢？微信的消息框：

.item {
    	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的講解中，我會給你個十全十美的方案。

2、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。

.item {
	    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像外擴展了多少，並不影響元素自己的大小。

3、outline

  與box-shadow類似的是，它的大小也不影響元素的大小。這裏可能須要講的，就是不要忽略outline-offset，並且它能夠取負值。

.item {
    	width: 100px;
        height: 100px;
        outline: 10px solid rgb(110,110,110);
        outline-offset: -45px;
        border: 10px solid rgb(110,110,110);
        border-radius: 50%;
    }
複製代碼

---

  喜歡本文的小夥伴們,歡迎關注個人訂閱號超愛敲代碼,查看更多內容.