小知识,大挑战!本文正在参与“ 程序员必备小知识 ”创作活动
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
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 属性。
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;
}