title: CSS: Why background-color breaks/removes the box-shadow?
body: <p>I have a pretty simple div structure - tree boxes with middle box highlighted with box-shadow:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="offerBox"&gt;
    &lt;div class="obOffer"&gt;
      &lt;div class="obOfferTitle"&gt;Free&lt;/div&gt;
      &lt;div class="obOfferPrice"&gt;Free&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="obOffer obHiLight"&gt;
      &lt;div class="obOfferTitle"&gt;Title&lt;/div&gt;
      &lt;div class="obOfferPrice"&gt;$10&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="obOffer"&gt;
      &lt;div class="obOfferTitle"&gt;Title 2&lt;/div&gt;
      &lt;div class="obOfferPrice"&gt;$10&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;​</code></pre>
  </div>
  </div>
  </p>
  <p>​
  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.</p>
  <p>Any ideas why and how to fix it?</p>
  <p>Live Example of the problem:
  <a href="http://jsfiddle.net/SqvUd/" rel="noreferrer">http://jsfiddle.net/SqvUd/</a></p>