css 实现空心阴影效果

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

问题

一天，可爱的设计小姐姐拿来一个设计稿，说这个小框我想做成这样～

你一头雾水，这种空心的阴影应该怎么做呢...

解决

突然～！你想到了办法，这不就是 box-shadow 嘛

先来一个框

body {
  background-color: #000;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid #cc33ee;
  border-radius: 5px;
}

这样，我们先得到了第一个框，接下来就要给他加阴影了

回忆 box-shadow 用法

直接来一个复杂的 box-shadow

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

从 mdn 的例子可以看到，box-shadow 的参数分别是：x偏移量、y偏移量、阴影模糊半径、阴影扩散半径、阴影颜色

我们很快会发现，我们想要实现的空心阴影效果，单靠一个阴影是不能实现的，但是可以两个阴影叠加起来做，先来看一下 mdn 的例子：

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

这里定义了两个阴影，分别是 x、y 偏移 3px 的红色阴影，和负向偏移有模糊的橄榄绿阴影

实现

于是我们会想到，把两个阴影放到同一个方向，是不是就可以了呢？是的！

body {
  background-color: #000;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid #cc33ee;
  border-radius: 5px;
  box-shadow: 7px 7px #000, 7px 7px 0 1px #ffee44;
}

首先是 7px 7px #000，和背景色相同的阴影，挡住了中间的部分；草率的画了一下黑色阴影的位置。。

然后是 7px 7px 0 1px #ffee44，偏移也是 7px，但是它增加了 1px 的扩散半径，且没有模糊半径，于是就会在 7px 的基础上向外扩散 1px，并且颜色是 #ffee44

叠加在一起后，黑色的阴影把黄色阴影的部分覆盖住了，于是显示出来就是黄色的边框～

参考

developer.mozilla.org/zh-CN/docs/…

以上是本文全部内容，欢迎点赞和评论～