用css3在盒子下面分开的椭圆形阴影

时间:2012-03-12 11:29:17

标签: css3

如何在200px的盒子下方获得10px高的椭圆形模糊阴影?

.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

由于

4 个答案:

答案 0 :(得分:3)

删除了带有供应商前缀的样式(它们很烦人,您可以使用我提供的内容添加它们)但是这里是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;   
}

答案 1 :(得分:1)

我总是喜欢挑战。以下是我提出的问题: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;  
}

答案 2 :(得分:0)

我尝试在“悬停”事件后更改显示阴影的代码,但不起作用

答案 3 :(得分:0)

尝试使用:

margin:0 auto;

在中心做一个阴影,想减少左右两边的阴影。尝试分配它 width 小于 div/box 的宽度。

enter image description here