CSS：为什么background-color会破坏/去除盒子阴影？ [英] CSS: Why background-color breaks/removes the box-shadow?

问题描述

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

I have a pretty simple div structure - tree boxes with middle box highlighted with 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属性设置。出于某些原因，这种背景颜色会从右侧且仅从右侧移除框阴影。

​ One of the elements inside those boxes have a background-color property set. For some reasons this background-color removes the box-shadow from the right and only from the right.

任何想法为何以及如何修复它？

Any ideas why and how to fix it?

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

Live Example of the problem: http://jsfiddle.net/SqvUd/

推荐答案

您只需添加z-index和position：relative;参见示例。 http://jsfiddle.net/SqvUd/2/

You just need to add z-index and position:relative; see the example. http://jsfiddle.net/SqvUd/2/

这篇关于CSS：为什么background-color会破坏/去除盒子阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！