開本系列，讨論一些有趣的 CSS 題目，抛開實用性而言，一些題目為了拓寬一下解決問題的思路，此外，涉及一些容易忽視的 CSS 細節。
解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
<a href="http://www.cnblogs.com/coco1s/p/5893921.html">談談一些有趣的CSS題目（一）-- 左邊豎條的實作方法</a>
假設我們的單标簽為 <code>div</code>:
定義如下通用 CSS:
這一題主要考查的是盒子模型 <code>Box Model</code> 與 背景 <code>background</code> 的關系，以及使用 <code>background-clip</code> 改變背景的填充方式。
<code>background</code> 在 <code>Box Model</code> 中，他是布滿整個元素的盒子區域的，并不是從 <code>padding</code> 内部開始（也就是說從 border 就開始啦），隻不過實線邊框（solid）部分遮住了部分 <code>background</code> ，是以我們使用虛線邊框（dashed）就可以看到背景色是從 <code>border</code> 内部開始的。
我們給 <code>div</code> 添加如下樣式：
結果如下：
但有一點需要注意，<code>background-color</code> 是從元素的邊框左上角起到右下角止，而 <code>background-image</code> 卻不一樣，他是從 <code>padding</code> 邊緣的左上角起而到 <code>border</code> 的右下角邊緣止。
background image 的繪制中有兩個因素決定了繪圖區域：
The image is repeated in this direction as often as needed to cover the background painting area.
當然，這個填充規則是可以通過 <code>background-clip</code> 改變的。
<code>background-clip</code> 設定元素的背景（背景圖檔或顔色）是否延伸到邊框下面。
文法：
繼續說回本題，接下來，隻需要将中間部分填充為白色即可，這個用僞元素可以輕松完成，是以，其中一個方法如下：
上面的方法，我們使用了 <code>div</code> 的背景色預設情況下從 <code>border</code> 開始填充，及僞元素設定白色背景色填充<code>div</code> 的中間的 <code>padding-box</code> 區域完成圖形。
也可以反過來，使用僞元素背景色從 <code>border-box</code> 開始填充，使用 <code>div</code> 的背景色填充中間 <code>padding-box</code>區域。
上面 <code>法二</code> 除了用到了 <code>background-clip</code> 改變背景的填充區域，還用到了 <code>z-index</code> 觸發元素生成了堆疊上下文（stacking context），改變了元素的層疊順序（stacking levle），讓<code>僞元素背景色</code>疊到了 <code>div 背景色</code> 之下，這兩個概念下題會提及。
本題主要是想讨論一下 CSS 的盒子模型 <code>Box Model</code> 與 背景 <code>background</code> 的關系，其實本題就是在于一個 dashed 邊框，内部使用顔色填充即可，與上面第一題異曲同工，使用陰影、漸變都可以完成，感興趣可以自己嘗試一下其他解法。
下面是我列出來的部分解法：
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。