谈谈一些有趣的CSS题目（二）--从条纹边框的实现谈盒子模型
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了谈谈一些有趣的CSS题目（二）--从条纹边框的实现谈盒子模型，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3216字，纯文字阅读大概需要5分钟。
内容图文
开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。
不断更新，不断更新，不断更新，重要的事情说三遍。
所有题目汇总在我的 Github 。
2、类似下面这个图形，只使用一个标签，可以有多少种实现方式：
假设我们的单标签为 div:
定义如下通用 CSS:
div{
position:relative;
width: 180px;
height: 180px;
}
这一题主要考查的是盒子模型 Box Model 与 背景 background 的关系，以及使用 background-clip 改变背景的填充方式。
background 在 Box Model 中，他是布满整个元素的盒子区域的，并不是从 padding 内部开始（也就是说从 border 就开始啦），只不过实线边框（solid）部分遮住了部分 background ，所以我们使用虚线边框（dashed）就可以看到背景色是从 border 内部开始的。
我们给 div 添加如下样式：
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设置元素的背景（背景图片或颜色）是否延伸到边框下面。
语法：
{
background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
}
继续说回本题，接下来，只需要将中间部分填充为白色即可，这个用伪元素可以轻松完成，所以，其中一个方法如下：
div{
background:#9c27b0;
border:20px dashed #2196f3;
}
div::after{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:#fff;
}
法二：
上面的方法，我们使用了 div 的背景色默认情况下从 border 开始填充，及伪元素设置白色背景色填充div 的中间的 padding-box 区域完成图形。
也可以反过来，使用伪元素背景色从 border-box 开始填充，使用 div 的背景色填充中间 padding-box区域。
div{
background:#fff;
background-clip:padding-box;
border:20px dashed #cccc99;
}
div::before{
content:"";
position:absolute;
top:-20px;
left:-20px;
bottom:-20px;
right:-20px;
background:#996699;
z-index:-1;
}
具体的 Demo 戳这里 。
上面 法二 除了用到了 background-clip 改变背景的填充区域，还用到了 z-index 触发元素生成了堆叠上下文（stacking context），改变了元素的层叠顺序（stacking levle），让伪元素背景色叠到了 div 背景色 之下，这两个概念下题会提及。
法....
本题主要是想讨论一下 CSS 的盒子模型 Box Model 与 背景 background 的关系，其实本题就是在于一个 dashed 边框，内部使用颜色填充即可，与上面第一题异曲同工，使用阴影、渐变都可以完成，感兴趣可以自己尝试一下其他解法。
下面是我列出来的部分解法：
所有题目汇总在我的 Github ，发到博客希望得到更多的交流。
到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
内容总结
以上是互联网集市为您收集整理的谈谈一些有趣的CSS题目（二）--从条纹边框的实现谈盒子模型全部内容，希望文章能够帮你解决谈谈一些有趣的CSS题目（二）--从条纹边框的实现谈盒子模型所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。