css3下方的分隔椭圆形阴影

如何在200px框下面获得10px高的椭圆形模糊阴影？css3下方的分隔椭圆形阴影

.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 上面的代码几乎是完美的，但我希望有一个更细的椭圆形模糊的影子，并删除的令人不安的白色背景：之前。

谢谢，我终于得到了它的预期差不多，除了左，正确的应该是更加模糊： http://jsbin.com/uqugob/4

感谢

来源

2012-03-12 swan

除去与供应商的前缀样式（他们是讨厌，你也可以添加对方使用的是什么我提供），但这里的the shadow's code：

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

来源

2012-03-12 11:50:10 Joseph

我总是喜欢挑战。这就是我想出的：http://jsbin.com/uqugob/3/edit

像@约瑟夫，我摆脱了供应商的前缀。

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

来源

2012-03-12 11:52:51 MrMisterMan

我试图改变的代码显示“悬停”事件后的影子，不工作

来源

2013-10-31 13:27:32 tchiko

css3下方的分隔椭圆形阴影

回答

相关问题