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

Question

如何在 box-shadow 中添加边框？

我想创建一个带有彩色偏移并以黑色边框勾勒出的类。

我知道我可以创建一个 div 并将其偏移以获得这种期望的外观，但我想知道是否有可能不使用 div 实现，这样我就可以只创建一个类并将其添加到我想要实现此效果的 div 上。

我附加了一个代码片段，显示了彩色偏移，但我希望红色偏移能用黑色边框勾勒出来。

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

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

- jermayne williams

Answer 1

你可以向你的 div 元素添加额外的 box-shadow 属性来获得特定的效果。对于你的情况，请将你的 box-shadow 属性更新为如下内容：

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

此资源有关于box-shadow及其语法的更多信息。如果您想了解更多，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow。

- Shubh Sheth

Answer 2

您可以为您的类添加CSS伪元素，这将自动在具有该类的每个元素后面添加另一个对象。使用绝对定位，负的z-index，100%的宽度和高度，并使用left或right和bottom或top参数确定偏移量，如下例所示：

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

.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>

- Johannes

Answer 3

CSS中的outline和border不会有太大帮助，因为box-shadow并不存在，它们仍然会针对元素的边界框（不受盒子阴影影响）。您可以使用::before或::after，但这对于您尝试做的事情有点复杂。

你可以使用多重阴影来实现。 box-shadow 接受一个逗号分隔的阴影列表，并且在所有主流浏览器中都受支持。这里的诀窍是利用 box-shadow 的第四个参数（在我看来被低估了），称为 spread-radius。这将通过许多像素在模糊半径应用之前"扩展"或"收缩"框阴影的参考框架。

对于你的情况，要在阴影周围创建2px宽的"边框"，可以执行以下操作：

.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>

- Xhynk