阴影与模糊边缘仅使用纯css

Question

是否有可能只使用纯css制作这样的阴影？

Answer 1

由于影子不均匀，我会尝试这样的事情：http://www.sitepoint.com/pure-css3-paper-curl/。我知道这不是你想要的效果，但你会有一个开始的地方。

Answer 2

框阴影绝对是纯CSS缩小阴影的方法。但由于框阴影遵循它们所应用的元素的轮廓，:before或:after伪元素最适合（以保持html整洁）。

.roundShadow:after {
  content:'';
  display:block;
  position:absolute;
  bottom:0;
  width:90%;
  height:100%;
  z-index:-1;
  margin:0 5%;
  -webkit-box-shadow:0 5px 5px rgba(0,0,0,.4);
  -webkit-border-radius:50% 4%;
  -moz-box-shadow:0 5px 5px rgba(0,0,0,.4);
  -moz-border-radius:50% 4%;
  box-shadow:0 5px 5px rgba(0,0,0,.4);
  border-radius:50% 4%;
}

这会在模仿父元素形状的部分后面创建一个块级伪元素，但底部为圆形，所需的框阴影。

只需将class="roundShadow"添加到您想要的部分即可。您可能需要修补边距的第二个图形以保持阴影居中，否则阴影应该符合您粘贴的任何元素。哦，并确保父元素是position:relative;或position:absolute;，否则它将无效！

Answer 3

您可以尝试使用box-shadow来实现这一目标：

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

• http://css-tricks.com/snippets/css/css-box-shadow/

Answer 4

你可以达到这样的效果，虽然它不会像你在你的图像中那样精确的阴影。

使用CSS3框阴影可以执行以下操作：

.bottom-shadow {
    -webkit-box-shadow: 0 4px 6px -6px #000000;
    -moz-box-shadow: 0 4px 6px -6px #000000;
    box-shadow: 0 4px 6px -6px #000000;
}

JSFiddle

如果您不确定，box-shadow的参数顺序为：

box-shadow: [horizontal-offset] [vertical-offset] [blur] [spread] [colour]