html盒子边框内部线条,详解CSS从条纹边框的实现盒子模型的方法

本文探讨了如何利用CSS的盒子模型和背景属性创造图形,通过dashed边框和背景填充来实现。文章介绍了background-positioning-area和background-painting-area的概念,并展示了如何通过background-clip改变背景填充区域,以及利用伪元素和z-index调整层叠顺序。示例中提到了多种实现方法,包括使用伪元素和调整背景填充策略。
摘要由CSDN通过智能技术生成

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

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

e55f76482d1159db726cc3aee0e26223.png

假设我们的单标签为 p:

定义如下通用 CSS:p{

position:relative;

width: 180px;

height: 180px;

}

这一题主要考查的是盒子模型

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

我们给 p 添加如下样式:p{

background:#9c27b0;

border:20px dashed #2196f3;

}

结果如下:

7aab91c1ae0cc08976cc1194073e32d0.png

但有一点需要注意,padding 边缘的左上角起而到 border 的右下角边缘止。

background image 的绘制中有两个因素决定了绘图区域:background positioning area。属性决定了这个相对定位位置,默认为 padding-box。所以默认的背景图片绘制是从 padding box 的左上顶点开始的。

background painting area。background-clip属性决定了绘制区间,默认为 border-box。所以在The image is repeated in this direction as often as needed to cover the background painting area.

嗯,什么意思呢,你可以戳进这个 demo 看看,正常情况下的背景图填充如下:

41d64713c8007573f5752ef95c337eef.png

当然,这个填充规则是可以通过 background-clip 改变的。background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。

语法:{

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

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

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

}

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

background:#9c27b0;

border:20px dashed #2196f3;

}

p::after{

content:"";

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

background:#fff;

}

法二:

上面的方法,我们使用了 p 的背景色默认情况下从 border 开始填充,及伪元素设置白色背景色填充p 的中间的 padding-box 区域完成图形。

也可以反过来,使用伪元素背景色从 border-box 开始填充,使用 p 的背景色填充中间 padding-box区域。p{

background:#fff;

background-clip:padding-box;

border:20px dashed #cccc99;

}

p::before{

content:"";

position:absolute;

top:-20px;

left:-20px;

bottom:-20px;

right:-20px;

background:#996699;

z-index:-1;

}

上面 法二 除了用到了 background-clip 改变背景的填充区域,还用到了 z-index 触发元素生成了堆叠上下文(stacking context),改变了元素的层叠顺序(stacking levle),让伪元素背景色叠到了 p 背景色 之下,这两个概念下题会提及。

法....

本题主要是想讨论一下 CSS 的盒子模型 Box Model 与 背景 background 的关系,其实本题就是在于一个 dashed 边框,内部使用颜色填充即可,与上面第一题异曲同工,使用阴影、渐变都可以完成,感兴趣可以自己尝试一下其他解法。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值