谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型
2016-09-22 13:02
316 查看
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。
不断更新,不断更新,不断更新,重要的事情说三遍。
谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法
所有题目汇总在我的 Github 。
假设我们的单标签为
定义如下通用 CSS:
这一题主要考查的是盒子模型
我们给
结果如下:
但有一点需要注意,
background image 的绘制中有两个因素决定了绘图区域:
background positioning area。
background painting area。
The image is repeated in this direction as often as needed to cover the background painting area.
嗯,什么意思呢,你可以戳进这个 demo 看看,正常情况下的背景图填充如下:
当然,这个填充规则是可以通过
语法:
继续说回本题,接下来,只需要将中间部分填充为白色即可,这个用伪元素可以轻松完成,所以,其中一个方法如下:
也可以反过来,使用伪元素背景色从
具体的 Demo 戳这里 。
上面
下面是我列出来的部分解法:
所有题目汇总在我的 Github ,发到博客希望得到更多的交流。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。
不断更新,不断更新,不断更新,重要的事情说三遍。
谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法
所有题目汇总在我的 Github 。
2、类似下面这个图形,只使用一个标签,可以有多少种实现方式:
假设我们的单标签为
div:
<div></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题目(2): 从条纹边框的实现谈盒子模型
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
- 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
- 谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线
- 谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text
- 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
- 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode
- 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少
- 从条纹边框实现谈盒子模型
- 谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
- 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
- 谈谈一些有趣的CSS题目(七)-- 消失的边界线问题
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略