css - 圆 Angular 框阴影仅在拐 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;
}

最佳答案

不完全是，但是您的问题可以通过其解决。

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