box-shadow CSS 属性可以有填充吗？答案

【问题标题】：Can box-shadow CSS property have padding?box-shadow CSS 属性可以有填充吗？
【发布时间】：2022-02-15 09:22:11
【问题描述】：

是否可以使用 box-shadow 属性在距离形状较远的地方实现this red countour？

【问题讨论】：

什么形状？是图像吗？ div的集合？ SVG？
@bowlowl 它是一个矩阵，它使用主要是 div 的反应组件的实例。

【解决方案1】：

是的，您可以添加两个阴影，并使内部的阴影与背景颜色相同。不过我不喜欢这种方法，我宁愿使用border 和outline。

div {
  margin: 50px;
  width: 300px;
  height: 100px;
  background-color: aquamarine;
  box-shadow: 0px 0px 0px 8px #FFFFFF, 0px 0px 0px 17px #CCC7CA;
}

&lt;div&gt;&lt;/div&gt;

没有box-shadow：

#background {
  background-color: darkblue;
  display: block;
  height: 100vh;
  padding: 50px;
}

#box {
  width: 300px;
  height: 100px;
  background: aquamarine padding-box;
  border: 8px transparent solid;
  outline: 9px #CCC7CA solid;
}

<div id="background">
  <div id="box"></div>
</div>

【讨论】：

这看起来不错。最终我会使用 mathgrid 组件作为图片中的背景。这不会带来某种视觉冲突吗？
你不会有一个透明的背景，我会更新我的答案，以便在没有box-shadow的情况下做到这一点
我之所以选择box-shadow，是因为我需要使用@keyframe 让它闪烁。
由于box-shadow 本质上只是元素下方的一个模糊框，我不确定是否可以让间隙透明。