css - 圆 Angular 盒阴影仅在 Angular 落处

Question

我希望框阴影仅出现在圆形的 Angular 处。 但盒子阴影出现在所有侧面。我想要如下图所示的东西。

html:

<div class="img">
    <img src="http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png" alt=""/>
</div>

CSS:

img {
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
}

Answer 1

不完全是，但你的问题可以通过它来解决。

html

<div class="shadow">
  <div class="img">
    <img src="http://placehold.it/250x300" alt="" />
  </div>
</div>

CSS

*{
box-sizing: border-box;
}
.shadow {
  width: 250px;
  height: 300px;
  position: relative;
  margin: auto;
}

.img {
  padding: 15px;
  background: #fff;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.shadow {
  position: relative;
}

.shadow:after,
.shadow:before,
.img:after,
.img:before{
    content: "";
    width: 50px;
    height: 50px;
    box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.6);
    position: absolute;
    z-index: -1;
}

.shadow:before,
.shadow:after{
  top: 0;
}
.img:before, .img:after {
    bottom: 6px;
}
.shadow:before{
  left: 0;
}
.shadow:after {
  right: 0;
}
.img:before {
  left: 0;
}

.img:after {
  right: 0;
}

参见Fiddle