HTML+CSS入门有趣的CSS题目之从条纹边框的实现谈盒子模型
阿萨 2018-03-20 来源 :网络 阅读 865 评论 0

摘要:开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。


类似下面这个图形,只使用一个标签,可以有多少种实现方式:

HTML+CSS入门有趣的CSS题目之从条纹边框的实现谈盒子模型

假设我们的单标签为 div:

XHTML

<div></div>

定义如下通用 CSS:

CSS

div{

    position:relative;

    width: 180px;

    height: 180px;

}

这一题主要考查的是盒子模型 Box Model 与 背景 background 的关系,以及使用 background-clip 改变背景的填充方式。

background 在 Box Model 中,他是布满整个元素的盒子区域的,并不是从 padding 内部开始(也就是说从 border 就开始啦),只不过实线边框(solid)部分遮住了部分 background ,所以我们使用虚线边框(dashed)就可以看到背景色是从 border 内部开始的。

我们给 div 添加如下样式:

CSS

div{

    background:#9c27b0;

    border:20px dashed #2196f3;

}

结果如下:

HTML+CSS入门有趣的CSS题目之从条纹边框的实现谈盒子模型

但有一点需要注意,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 看看,正常情况下的背景图填充如下:

HTML+CSS入门有趣的CSS题目之从条纹边框的实现谈盒子模型


当然,这个填充规则是可以通过 background-clip 改变的。

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。

语法:

CSS{

    background-clip: border-box;  // 背景延伸到边框外沿(但是在边框之下)

    background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。

    background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。

}

XHTML

<!-- 填充与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>

CSS

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('//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;

}


继续说回本题,接下来,只需要将中间部分填充为白色即可,这个用伪元素可以轻松完成,所以,其中一个方法如下:

CSS

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区域。

CSS

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 边框,内部使用颜色填充即可,与上面第一题异曲同工,使用阴影、渐变都可以完成,感兴趣可以自己尝试一下其他解法。


希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!


本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-IT技术咨询与就业发展一体化服务 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved