css之條紋邊框的實現

感謝chokcoco大佬，題目和解題思路來源：http://www.cnblogs.com/coco1s/p/5895764.html。

主要記錄通過這個題目而惡補的css屬性們。

題目：下面這個圖形，只使用一個標籤，可以有多少種實現方式：

拿到題的第一個想法是，可以設置底下爲全藍，邊框是虛線粉，中間一片白色。

於是有了第一種最簡單的解法：

#div1 {
            width: 180px;
            height: 180px;
            position: relative;
            border: 20px dashed deeppink;
            background-color: deepskyblue;
        }
#div1::after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: white;
        }

這裏我們稍稍複習一下border-style:

dotted------點狀

solid--------實線

dashed-----虛線

double-----雙線

機智的盆友此刻一定會說：那我把after設大一點，然後讓它移到div下面去不就又是一種方法了嘛~

那麼，接下來有請我們的第二種方法閃亮登場：

#div1 {
            width: 180px;
            height: 180px;
            position: relative;
            border: 20px dashed deeppink;
            background-color: white;
            background-clip: content-box;
        }
#div1::after {
            z-index: -1;
            content: "";
            position: absolute;
            top: -20px;
            left: -20px;
            bottom: -20px;
            right: -20px;
            background-color: deepskyblue;
        }

這個方法中用到的知識點稍微有點多，讓我們一條條地來梳理。

①background-clip規定了從XX區域向外裁剪背景

border-box：從border區域向外裁剪背景。（默認）padding-box：從padding區域向外裁剪背景。content-box：

從content區域向外裁剪背景。

在background-repeat:no-repeat的情況下：

以上是background-color，那我們用background-image來做個對比實驗：

欸？！注意觀察噴槍的位置！爲什麼左上角是從padding-box開始繪製的，而結束卻遵循border-box？

②background-image開始繪製的位置

background-image默認開始繪製的位置是padding-box左上角，painting area（繪製區間）是由background-clip決定的

而positioning area （起始點位置）是由background-origin決定的。

下圖爲background-origin三個值的不同顯示方式：

③::after繪製起始點

無論是用display:block還是position:absolute來控制僞元素，繪製起點都是padding-box的左上角，所以如果是display:block，需要添加margin-top:-20px;margin-left:-20px;如果是position:absolute則需要top:-20px;left:-20px。

④z-index:-1

在使用display:block的過程中發現，z-index只能配合着positioned元素一起使用（relative、absolute、fixed），默認static情況下是無效的！所以div::after的position:absolute至關重要！

第三種方法瞭解一下

思路是：下面實線border，上面虛線outline。

嘗試此方法時恰好解決了上一篇博客中遺留下來的問題：outline 不會像border那樣影響元素的尺寸或者位置什麼意思呢？

#div1 {
            margin-left: 5px;
            width: 180px;
            height: 180px;
            position: relative;
            border: 20px solid deepskyblue;
            background-color: white;
        }
#div1::after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            outline: 20px dashed deeppink;
        }

因爲outline不佔用元素的尺寸位置，::after的計算位置是從padding最外開始算起，這個算起並不包括outline，所以outline肯定會和border重合。

 

第四種方法

#div1 {
            width: 180px;
            height: 180px;
            border: 20px dashed deeppink;
            background-color: deepskyblue;
            box-shadow: 180px 0 0 0 white inset; 
        }

內陰影也是從padding-box開始算的，所以不會擋住border

下圖是內陰影和外陰影的對比圖：

哦~我可憐的border~

誰都不帶你玩兒