css 世界之多重边框

663 阅读3分钟

小知识,大挑战!本文正在参与“  程序员必备小知识  ”创作活动

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

多重边框代码

box-shadow 方案

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

/* 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 大家应该都不陌生,是用来设置投影的。不太为人所知的是,它还接受第四个参数(称作“扩张半径”),取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。

一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值(即前三个参数都为0),得到的"投影"其实就是一道实线边框。

// css
div {
	width: 100px;
        height: 60px;
        margin: 25px;
        background: #e666ff;
        box-shadow: 0 0 0 10px #ffff4d;
}
// html
<div></div>

边框

如上功能完全可以直接用 border 属性来做,但 box-shadow 的优势在于,它支持逗号分隔语法,可以创建任意数量的投影。因此,可以基于上面的示例再加上一道边框。

div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}

二层边框

可以看到确实做到二层边框了,可是我明明 deeppink 设置的扩张半径是 15px,为什么看起来那么窄?

实际上这是由于 box-shadow 是层层叠加的,第一层投影位于最顶层,依次类推。所以第一层颜色为 #655 的投影会覆盖 deeppink 的投影,导致 deeppink 只显示出 5px(15px-10px)。

基于这种做法,可以实现任意层数的边框,当然也可以加一层常规的投影:

div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink,
		0 2px 5px 15px rgba(0, 0, 0.6);
}

常规投影

outline 方案

outline

如果只需要两层边框,那么这时也可以采用 outline 属性。

div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	border: 10px solid #655;
	outline: 5px solid deeppink;
}

两层边框

可以看到,效果跟上面采用 box-shadow 是一样的,并且 box-shadow 只能模拟实线边框,而 outline 还可以实现虚线边框等。只要将 outline 属性值里的 solid 改成 dashed 即可:

div {
	outline: 5px dashed deeppink;
}

虚线边框