开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。
不断更新，不断更新，不断更新，重要的事情说三遍。
所有题目汇总在我的 Github 。
2、类似下面这个图形，只使用一个标签，可以有多少种实现方式：
假设我们的单标签为 div:
|
1 |
<div></div> |
定义如下通用 CSS:
|
1 2 3 4 5 |
div{ position:relative; width: 180px; height: 180px; } |
这一题主要考查的是盒子模型 Box Model 与 背景 background 的关系，以及使用 background-clip 改变背景的填充方式。
background 在 Box Model 中，他是布满整个元素的盒子区域的，并不是从 padding 内部开始（也就是说从 border 就开始啦），只不过实线边框（solid）部分遮住了部分 background ，所以我们使用虚线边框（dashed）就可以看到背景色是从 border 内部开始的。
我们给 div 添加如下样式：
|
1 2 3 4 |
div{ 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设置元素的背景（背景图片或颜色）是否延伸到边框下面。
语法：
|
1 2 3 4 5 |
{ background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下） background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。 background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。 } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- 填充与background-clip属性有关 --> <!-- 背景色的填充规则，默认为 border-box 从盒子最左上角到最右下角 --> <div class="bgColor"></div> <div class="bgColor contentBox"></div> <div class="bgColor paddingBox"></div> <!-- 背景图的填充规则，默认为 border-box 从盒子的左上角padding到最右下角 --> <div class="bgImg"></div> <div class="bgImg contentBox"></div> <div class="bgImg paddingBox"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
div{ width:150px; height:150px; margin:50px 10px;; border:20px dashed rgba(0, 0, 0, 0.5); float:left; padding:10px; // background-size:cover; } .bgColor{ background-color:#ff7300; // background-clip:border-box; } .bgImg{ background-color:#ff7300; background-image:url('http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg'); background-repeat:no-repeat; // background-clip:border-box; } .contentBox{ background-clip:content-box; } .paddingBox{ background-clip:padding-box; } |
See the Pen CssBackground by Chokcoco (@Chokcoco) on CodePen.
继续说回本题，接下来，只需要将中间部分填充为白色即可，这个用伪元素可以轻松完成，所以，其中一个方法如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div{ background:#9c27b0; border:20px dashed #2196f3; } div::after{ content:""; position:absolute; top:0; left:0; bottom:0; right:0; background:#fff; } |
