html - CSS 框阴影部分透明？

Question

我有一个 div，所有四个边都有一个盒子阴影。然而，在 div 的底 Angular ，我放置了一个背景图像 (png) 以使 Angular 看起来像折叠的一样。有没有办法让底 Angular 的盒子阴影透明？或者还有其他解决方法吗？

谢谢，p

Answer 1

解释

您可以将 position: absolute 和负的 bottom 和 left 属性设置为 corner 和 position:relative于父元素 (box) 的 以将其存档。

假设这是您的盒子，里面是 Angular 。

<div class="box">
  <div class="corner"></div>
</div>

我们的框有5px 阴影大小

.box {
  -webkit-box-shadow: 0 0 5px rgba(40,128,1,1);
  -moz-box-shadow: 0 0 5px rgba(40,128,1,1);
  box-shadow: 0 0 5px rgba(40,128,1,1);
}

所以，我们的 Angular 将有bottom: -5px 和right: -5px;

.box > .corner {
  bottom: -5px;
  right: -5px;
}

请记住，我们的 Angular 需要position: absolute;

.box > .corner {
  position: absolute;
}

父级 position: relative

.box {
  position: relative;
}

使用 bottom 和 left 属性将其存档。

---

演示 |片段

body {
  background: #EFECCA;
  padding: 20px;
}

.box {
  width: 50%;
  height: 150px;
  position: relative;
  background: #fff;
  -webkit-box-shadow: 0 0 5px rgba(40,128,1,1);
  -moz-box-shadow: 0 0 5px rgba(40,128,1,1);
  box-shadow: 0 0 5px rgba(40,128,1,1);
}

.box > .corner {
  width: 40px;
  height: 40px;
  background: #EFECCA;
  position: absolute;
  bottom: -5px;
  right: -5px;
}

<div class="box">
  <div class="corner"></div>
</div>

---

PS，下次发布一些代码。