CSS

Question

是否可以给 box-shadow 添加边框？

我想创建一个 class 带有彩色偏移的图像，该偏移用黑色边框勾勒出轮廓。

现在我知道我可以创建一个 div 并偏移它以获得所需的外观，但我想知道是否可以不这样做，所以我可以创建一个 class 和将它添加到我也想这样做的 div 中。

我附上了一个显示颜色偏移的片段，但我希望红色偏移用黑色边框勾勒出来。

.example-div{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-shadow: -5px 5px red;
}

<div class="example-div">
</div>

Answer 1

您可以向 div 添加额外的框阴影以获得该效果。对于你的情况，将你的 box-shadow 属性更新为这样的东西

box-shadow: -5px 5px red, 
    -5px 5px 0px 3px black;

此资源包含大量关于框阴影的更多信息及其语法 https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow 如果您想遵循。

Answer 2

CSS outline and border aren't going to be much help unfortunately, as the box-shadow 并不真正存在并且它们仍将以元素的边界框为目标（不受框阴影的影响）。

您可以使用 ::before or ::after，但对于您要执行的操作而言，这会变得有点复杂。

您可以做的一件事是利用多个框阴影。 box-shadow 采用逗号分隔的阴影列表，所有主流浏览器都支持它。这里的技巧是使用第 4 个（未充分利用的恕我直言）参数作为 box-shadow，称为 spread-radius。这将 "spread"（扩展）或 "choke"（收缩）框阴影的参考帧 在应用模糊半径之前。

在您的例子中，对于框阴影周围 2px 宽 "border"，您可以执行以下操作：

.example-div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-shadow: -5px 5px red, -5px 5px 0 2px blue;
}

<div class="example-div"></div>

Answer 3

您可以向 class 添加一个 CSS 伪元素，它会自动在每个具有 class 的元素的主对象后面添加另一个对象。使用绝对位置、负数 z-index、100% width 和 height 并使用 left 或 right 和 bottom 或 [ 确定偏移量=18=] 参数，如本例所示：

（注意：使用此方法时需要主元素背景不透明）

.example-div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  background: #fff;
}
.example-div::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  background: red;
  border: 1px solid black;
}

<div class="example-div">
</div>

CSS - 是否可以在框阴影上添加边框？

CSS - Is it possible to add a border on the box shadow?

html

sass

box-shadow