Отделенная овальная тень под коробкой css3

Question

Как бы вы достигли овальной размытой тени высотой 10px ниже поля 200px?

.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;  
}   

http://jsbin.com/uqugob Приведенный выше код почти идеален, за исключением того, что я хочу более тонкую овальную размытую тень и убираю мешающий белый фон: before.

Спасибо, наконец-то я получил это, как и ожидалось, почти за исключением того, что левый и правый должны быть более размытыми: http://jsbin.com/uqugob/4

Спасибо

Answer 1

удалил стили с вендорами-префиксами (они раздражали, вы можете добавить их обратно, используя то, что я предоставил), но вот код тени :

.box:before {
  content:'';
  position: absolute;
  bottom: -50px;
  left:20px;
  width: 210px;
  height: 30px;
  background: #333;
  border-radius: 200px / 30px;   
  box-shadow: 0 0 10px 10px #333;   
}

Answer 2

Мне всегда нравится вызов.Вот что я придумал: http://jsbin.com/uqugob/3/edit

Как и @Joseph, я избавился от префиксов вендора.

.box:before {
  content:'';
  position: absolute;
  bottom: -10px;
  left:20px;
  width: 210px;
  height: 8px;
  background: transparent; /*Without a color, the box shadows fails*/
  border-radius: 100px / 5px; 
  box-shadow: 0 25px 25px #000000;  
}

Answer 3

Я пытаюсь изменить код для отображения тени после события 'hover', не работает