title: Separated oval shadow below a box with css3
body: <p>How would you achieve an <code>10px</code> high oval blurry shadow below a <code>200px</code> box?</p>
  <pre><code>.box {
    width:200px;
    height:200px;
    background: #c00;
    position:relative;
  }
  .box:before {
    content:'';
    position: absolute;
    bottom: -20px;
    left:20px;
    width: 210px;
    height: 10px;
    background: none; /*This cuts off some portion of the box shadow*/
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    -webkit-box-shadow: 0 15px 10px #000000;   
    -moz-box-shadow: 0 15px 10px #000000); 
    -0-box-shadow: 0 15px 10px #000000);   
    box-shadow: 0 15px 10px #000000;  
  }   
  </code></pre>
  <p><a href="http://jsbin.com/uqugob" rel="nofollow noreferrer">http://jsbin.com/uqugob</a>
  The above code is almost perfect, except that I want a more thin oval blurry shadow, and remove the disturbing white background of <code>:before</code>.</p>
  <p>Thanks, finally I got it as expected, almost, except that the left and right should be more blurry:
  <a href="http://jsbin.com/uqugob/4" rel="nofollow noreferrer">http://jsbin.com/uqugob/4</a></p>
  <p>Thanks</p>