CSS：为什么背景颜色会破坏/删除盒子阴影？答案

【问题标题】：CSS: Why background-color breaks/removes the box-shadow?CSS：为什么背景颜色会破坏/删除盒子阴影？
【发布时间】：2012-05-14 16:58:07
【问题描述】：

我有一个非常简单的 div 结构 - 树形框，中间的框用 box-shadow 突出显示：

.offerBox {
  width: 300px;
  margin: 10px;
}

.obOffer {
  width: 33%;
  float: left;
  height: 100px;
  text-align: center;
}

.obOfferPrice {
  padding: 10px;
  color: white;
  background-color: #85AADD;
}

.obHiLight {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

<div class="offerBox">
  <div class="obOffer">
    <div class="obOfferTitle">Free</div>
    <div class="obOfferPrice">Free</div>
  </div>
  <div class="obOffer obHiLight">
    <div class="obOfferTitle">Title</div>
    <div class="obOfferPrice">$10</div>
  </div>
  <div class="obOffer">
    <div class="obOfferTitle">Title 2</div>
    <div class="obOfferPrice">$10</div>
  </div>
</div>

这些框内的元素之一具有 background-color 属性集。由于某些原因，此背景颜色会从右侧移除框阴影，并且仅从右侧移除。

任何想法为什么以及如何解决它？

问题的实时示例： http://jsfiddle.net/SqvUd/

【问题讨论】：

标签： html css

【解决方案1】：

你只需要添加 z-index 和 position:relative;见例子。 http://jsfiddle.net/SqvUd/2/

【讨论】：

谢谢，我试过z-index，但没有考虑位置：相对；它确实解决了问题。
使用position: relative; 也为我解决了这个问题！非常感谢，试图解决这个问题让我发疯了。
对表格元素执行此操作的任何想法，其中位置没有任何影响？在我的用例中，我希望具有框阴影，但行也具有改变背景颜色的悬停效果。当框阴影行周围的行悬停时，它们会覆盖该侧（顶部或底部）的阴影
@ItJustWerks 只是想知道您是否找到了解决问题的方法？我面临着完全相同的事情