CSS揭秘:2.多重边框


多重边框

背景知识:box-shadow的基本用法,outline基本用法

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

以上是box-shadow的基本参数。box-shadow是为元素添加阴影效果的样式。但是我们可以通过对其属性的设置,呈现边框效果。

box-shadow 方案

box-shadow 单边框

  1. 将x偏移量 ,y偏移量设置为0px,此时阴影会在元素下面不会超出元素本身。
  2. 模糊度设为0px,使阴影呈现实体效果。
  3. 增大扩散半径,可以理解为阴影向外扩展半径。
  4. 此时阴影就像一条宽度为扩散半径的实线边框
box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.6);

在这里插入图片描述

box-shadow 多边框

box-shadow属性可以通过逗号分割添加多条阴影。

box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0.6),
            0px 0px 0px 40px rgba(120, 120, 120, 0.6);

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200610231706575.pn
要注意的是,阴影是层层叠加的,第一条阴影在最上层,以此类推,且阴影的半径都是以元素border外边沿为起点。所以如果你想要两条宽20px的阴影,那么两条阴影的扩散半径需要分别设置20px40px


我们需要注意的是,阴影不会影响元素的布局,我们可以从它的字面意思,阴影来理解,它不占用任何空间。并且元素上的绑定事件,并不会在阴影上触发。效果如图
在这里插入图片描述

margin 填充空间

那么如果我们需要阴影像我们预期的一样,跟border有相同的表现,我们可以增加同样的外边框margin来模拟出阴影占据的空间。

margin: 40px;
box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0.6),
            0px 0px 0px 40px rgba(120, 120, 120, 0.6);

在这里插入图片描述

background-clip

目前来讲,阴影的扩展方向都是从border外边沿向外扩。它虽然模拟出了空间,但是仍旧不会触发元素上的事件,如果你想在事件上也同border的表现一样,那么可以设置inset属性,使其向内扩散,并通过内边距padding来模拟空间。

padding: 40px;
background-color: black;
background-clip: content-box;
box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0.6),
            0px 0px 0px 40px rgba(120, 120, 120, 0.6);

在这里插入图片描述
需要注意的是,边框的顺序发生了反转。如果阴影边框设置了透明度,因为涉及到透明度颜色叠加,需要自己取色。同样的透明度也会被背景色穿透,如果不想被背景色影响,可设置background-clip: content-box;

outline 方案

outline可以实现两条边框的方案,同时更加灵活可以实现虚线边框。
border 和 outline 很类似,但有如下区别:

  1. 轮廓不占据空间(同阴影),绘制于元素内容周围。
  2. outline不一定贴合圆角。
  3. 我们可以通过outline-offset设置负值,来使轮廓显示在元素内部。

outline First Try

border: 10px solid blue;
outline: 10px solid skyblue;

不占据空间
在这里插入图片描述

outline Second Try

border: 10px solid blue;
outline: 10px solid skyblue;
border-radius: 20px;

不贴合圆角
在这里插入图片描述

outline Third Try

outline-offset 属性实现的缝边效果

background-color: #333;
outline: 2px dashed white;
border-radius: 20px;
outline-offset: -30px;

在这里插入图片描述
下一篇:CSS揭秘:3.灵活的背景定位

相关阅读

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Eighteen Z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值