开本系列，讨论一些有趣的 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 边框，内部使用颜色填充即可，与上面第一题异曲同工，使用阴影、渐变都可以完成，感兴趣可以自己尝试一下其他解法。
下面是我列出来的部分解法：
到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。