0

有没有可能只用纯css制作这样的阴影？

在此处输入图像描述

4

4 回答 4

1

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

于 2012-08-16T09:17:40.647 回答
1

盒子阴影绝对是纯 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;orposition:absolute;或者它不起作用！

于 2013-01-13T21:07:17.067 回答
0

您可以尝试使用 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;
}
于 2012-08-16T09:16:36.557 回答
0

您可以实现这样的效果，尽管它不会像您在图像中得到的那样精确。

使用 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]
于 2012-08-16T11:58:23.923 回答