如何使透明边框在下面显示框阴影而不是 div 的背景颜色？

Question

我有一个div，我正在尝试为它添加一个带有盒子阴影的透明边框，以便透明边框在下面显示box-shadow，而不是div的背景颜色。

这是我为展示我的问题而创建的 JSFiddle：https://jsfiddle.net/143k7myj/。

body {
  background-color: #f8f8f8;
}

div {
  width: 489px;
  height: 169px;
  background-color: #46aae3;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  border: 10px solid transparent;
  /* background-clip: content-box; */
}

div:hover {
  border-color: white;
}

<div></div>

如您所见，当我将鼠标悬停在div 上时，边框显示为白色。如果我不将鼠标悬停在它上面，它会显示“透明”边框。但是，它在下面显示的是 div 的背景颜色，而不是我想要实现的 div 的 box-shadow。

我的一个尝试是使用background-clip: content-box，然而，透明边框显示了实体的纯色背景色。

如何实现透明边框，使div 的box-shadow 显示在透明边框下方，而不是div 的背景颜色。谢谢。

Answer 1

可以用伪元素:before实现

body {
  background-color: #eee;
}

div {
  width: 489px;
  height: 169px;
  background-color: #46aae3;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.10);
  border-radius: 3px;
  position: relative;
  /* background-clip: content-box; */margin-top: 30px;margin-left: 30px;
}
div:before {
    content: "";
    border: 10px solid #fff;
    position: absolute;
    left: -10px;
    top: -10px;
    right: -10px;
    bottom: -10px;
    opacity: 0;
border-radius: 3px;
}

div:hover:before {
  opacity: 1;
}

<div></div>

Answer 2

编辑：

您可以使用一些变通方法通过伪元素来实现它：

body {
  background-color: #ddd;
  margin: 0;
  padding: 10px;
}

div {
  /* change the border width here */
  --border-width: 10px;
  
  width: 489px;
  height: 169px;
  background-color: #46aae3;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  margin: var(--border-width);
  position: relative;
}

div::before {
  content: '';
  display: block;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  margin: calc(var(--border-width) * -1);
  position: absolute;
  border-radius: inherit;
}

div:hover {
  box-shadow: 0px 4px 15px transparent;
}

div:hover::before {
  background-color: white;
  z-index: -1;
}

<div></div>