有趣的CSS题目(2): 从条纹边框的实现谈盒子模型
2017-05-15 22:51
651 查看
作者:伯乐在线专栏作者 - chokcoco
链接:http://web.jobbole.com/88202/
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。
不断更新,不断更新,不断更新,重要的事情说三遍。
《有趣的
CSS 题目(1): 左边竖条的实现方法》
所有题目汇总在我的 Github (https://github.com/chokcoco/iCSS/issues/1)。
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(https://codepen.io/Chokcoco/pen/QKyZPb) 看看,正常情况下的背景图填充如下:
当然,这个填充规则是可以通过 background-clip 改变的。
background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。
语法:
{
background-clip: border-box; // 背景延伸到边框外沿(但是在边框之下)
background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
}
<!-- 填充与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>
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;
}
继续说回本题,接下来,只需要将中间部分填充为白色即可,这个用伪元素可以轻松完成,所以,其中一个方法如下:
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 (https://codepen.io/Chokcoco/pen/ZppOmr)戳这里 。
上面 法二 除了用到了 background-clip 改变背景的填充区域,还用到了 z-index 触发元素生成了堆叠上下文(stacking context),改变了元素的层叠顺序(stacking levle),让伪元素背景色叠到了 div 背景色 之下,这两个概念下题会提及。
法….
本题主要是想讨论一下 CSS 的盒子模型 Box Model 与 背景 background 的关系,其实本题就是在于一个 dashed 边框,内部使用颜色填充即可,与上面第一题异曲同工,使用阴影、渐变都可以完成,感兴趣可以自己尝试一下其他解法。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
链接:http://web.jobbole.com/88202/
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。
不断更新,不断更新,不断更新,重要的事情说三遍。
《有趣的
CSS 题目(1): 左边竖条的实现方法》
所有题目汇总在我的 Github (https://github.com/chokcoco/iCSS/issues/1)。
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(https://codepen.io/Chokcoco/pen/QKyZPb) 看看,正常情况下的背景图填充如下:
当然,这个填充规则是可以通过 background-clip 改变的。
background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。
语法:
{
background-clip: border-box; // 背景延伸到边框外沿(但是在边框之下)
background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
}
<!-- 填充与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>
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;
}
继续说回本题,接下来,只需要将中间部分填充为白色即可,这个用伪元素可以轻松完成,所以,其中一个方法如下:
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 (https://codepen.io/Chokcoco/pen/ZppOmr)戳这里 。
上面 法二 除了用到了 background-clip 改变背景的填充区域,还用到了 z-index 触发元素生成了堆叠上下文(stacking context),改变了元素的层叠顺序(stacking levle),让伪元素背景色叠到了 div 背景色 之下,这两个概念下题会提及。
法….
本题主要是想讨论一下 CSS 的盒子模型 Box Model 与 背景 background 的关系,其实本题就是在于一个 dashed 边框,内部使用颜色填充即可,与上面第一题异曲同工,使用阴影、渐变都可以完成,感兴趣可以自己尝试一下其他解法。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
相关文章推荐
- 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型
- 从条纹边框实现谈盒子模型
- [置顶] 内容(content)、填充(padding)、边框(border)、边界(margin):CSS中盒子模型有何区别?
- css-4.边框和盒子模型
- 谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线
- CSS中背景图片,文本,列表与盒子模型的边框与边距
- 有趣的 CSS 题目(1): 左边竖条的实现方法
- 【JavaWeb】CSS_css中的边框属性(盒子模型的边框设置)
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
- CSS边框盒子模型
- CSS(三)_表格,盒子模型,边框
- css基础-盒子(div)模型、属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号
- css中的行高,盒子模型(边框,内边距,外边距),以及firework的基本使用
- CSS边框盒子模型详解
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
- 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法
- CSS边框盒子模型
- CSS增加这3行,盒子模型的内边距和边框不再会增加它的宽度
- CSS核心--盒子模型
- 关于CSS里盒子模型的一些感触