詳解CSS從條紋邊框的實現盒子模型的方法

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

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

假設我們的單標籤為 p:

<p></p>

定義如下通用 CSS:

p{    position:relative;    width: 180px;    height: 180px;}

這一題主要考查的是盒子模型 Box Model 與 背景 background 的關係，以及使用 background-clip 改變背景的填充方式。

background 在 Box Model 中，他是布滿整個元素的盒子領域的，並不是從 padding 內部開始（也就是說從 border 就開始啦），只不過實線邊框（solid）部分遮住了部分 background ，所以我們使用虛線邊框（dashed）就可以看到背景色是從 border 內部開始的。

我們給 p 添加如下樣式：

p{    background:#9c27b0;    border:20px dashed #2196f3;}

結果如下：

但有一點需要注意，background-color 是從元素的邊框左上方起到右下角止，而 background-image 卻不一樣，他是從 padding 邊緣的左上方起而到 border 的右下角邊緣止。

background image 的繪製中有兩個因素決定了繪圖區域：

• background positioning area。background-origin 屬性決定了這個相對定位位置，預設為 padding-box。所以預設的背景圖片繪製是從 padding box 的左上頂點開始的。

• background painting area。background-clip 屬性決定了繪製區間，預設為 border-box。所以在background-repeat: repeat 的情況下：

The image is repeated in this direction as often as needed to cover the background painting area.

嗯，什麼意思呢，你可以戳進這個 demo 看看，正常情況下的背景圖填充如下：

當然，這個填充規則是可以通過 background-clip 改變的。

background-clip 設定元素的背景（背景圖片或顏色）是否延伸到邊框下面。

文法：

{background-clip: border-box;  // 背景延伸到邊框外沿（但是在邊框之下）background-clip: padding-box; // 邊框下面沒有背景，即背景延伸到內邊距外沿。background-clip: content-box; // 背景裁剪到內容區 (content-box) 外沿。}

繼續說回本題，接下來，只需要將中間部分填充為白色即可，這個用虛擬元素可以輕鬆完成，所以，其中一個方法如下：

p{    background:#9c27b0;    border:20px dashed #2196f3;}p::after{    content:"";    position:absolute;    top:0;    left:0;    bottom:0;    right:0;    background:#fff;}

法二：

上面的方法，我們使用了 p 的背景色預設情況下從 border 開始填充，及虛擬元素設定白色背景色填充p 的中間的 padding-box 地區完成圖形。

也可以反過來，使用虛擬元素背景色從 border-box 開始填充，使用 p 的背景色填充中間 padding-box地區。

p{    background:#fff;    background-clip:padding-box;    border:20px dashed #cccc99;}p::before{    content:"";    position:absolute;    top:-20px;    left:-20px;    bottom:-20px;    right:-20px;    background:#996699;    z-index:-1;}

上面 法二 除了用到了 background-clip 改變背景的填充地區，還用到了 z-index 觸發元素產生了堆疊上下文（stacking context），改變了元素的層疊順序（stacking levle），讓虛擬元素背景色疊到了 p 背景色 之下，這兩個概念下題會提及。

法....

本題主要是想討論一下 CSS 的盒子模型 Box Model 與 背景 background 的關係，其實本題就是在於一個 dashed 邊框，內部使用顏色填充即可，與上面第一題異曲同工，使用陰影、漸層都可以完成，感興趣可以自己嘗試一下其他解法。