html多重边框,中间空白,CSS揭秘之多重边框的实现

多重边框的两种实现方案:

border-shadow

outline

Mutiple border

.common {

width: 25vw;

height: 20vh;

margin: 10%;

background: gray;

}

.box-shadow {

box-shadow: 0 0 0 10px #655,

0 0 0 15px deeppink,

0px 2px 5px 15px hsla(240, 100%, 50%, .5);

}

.inner-box-shadow {

background: white;

box-shadow: inset 0 0 40px hsla(0, 100%, 50%, 1);

}

.outline {

border: 2px solid hsla(280, 100%, 50%, 1);

outline: 2px dashed hsla(0, 0%, 100%, 1);

outline-offset: -15px;

border-radius: 10px;

outline-width: 2px;

}

box-shadow

以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ,阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。

/* x偏移量 | y偏移量 | 阴影颜色 */

box-shadow:60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */

box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */

box-shadow: inset 5em 1em gold;

/* 任意数量的阴影,以逗号分隔 */

box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */

box-shadow: inherit;

box-shadow: initial;

box-shadow: unset;

指定单个 box-shadow 的用法:

给出两个、三个或四个数字值的情况。

如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 和y轴上的偏移量 。

如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 。

如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 。

可选, 插页(阴影向内) inset。

可选, 颜色值 。

声明多个shadows时, 用逗号将shadows隔开。

outline

CSS的outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 outline-style, outline-width 和 outline-color。 多数情况下,简写属性更加可取和便捷。

轮廓与边框在以下几个方面存在不同:

轮廓不占据空间,它们被描绘于内容之上;

轮廓可以是非矩形的。在Gecko/Firefox中,轮廓是矩形的,但是Opera则会围绕元素结构绘制非矩形的形状;

/* 宽度 | 样式 | 颜色 */

outline: 1px solid white;

outline-offset :用于设置 outline 与一个元素边缘或边框之间的间隙。

outline是元素的轮廓,悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说,它们之间的颜色会继承父元素的背景色。

/* values */

outline-offset: 3px;

outline-offset: 0.2em;

/* Global values */

outline-offset: inherit;

outline-offset: initial;

outline-offset: unset;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值