css - 如何用CSS3制作图片阴影

Question

我想实现一个图片阴影如下

我尝试使用下面的代码，但是不能如我所愿地工作

代码片段:

.oval {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 30px;
  height: 5px;
  border: none;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: rgba(0, 0, 0, 1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
  -webkit-box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
  box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
  -webkit-transform: scaleX(5);
  transform: scaleX(5);
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
}

<div class="oval"></div>

如果CSS代码没问题，我想把HTML代码放在图片下面。

Answer 1

实现此目的的另一种方法是使用带有 CSS 转换的伪元素。在下面的代码片段中，:after 伪元素在 X 轴上旋转了接近 90deg(但不等于 90deg)给它一个椭圆形的外观。然后通过添加radial-gradient背景和box-shadow，我们可以得到接近图片中图像的外观。

这种方法的一个优点是生成的阴影具有响应性，因此它可以适应容器/图像大小的变化。

.oval{
  position: relative;
  height: 200px;
  width: 200px;
  border: 8px solid red;
  border-radius: 50%;
}
.oval img{
  border-radius: 50%;
}
.oval:after{
  position: absolute;
  content: '';
  height: 100%;
  width: calc(100% - 40px); /* to offset for the shadow */
  top: 25%;
  left: 20px; /* to offset for the shadow spread */
  border-radius: 50%;
  backface-visibility: hidden;
  transform-origin: 50% bottom;
  transform: rotateX(85deg);
  background: radial-gradient(ellipse at center, rgba(216,216,216, 0.5), rgba(248,248,248,0.1));
  box-shadow: 0px 0px 20px 20px rgba(248,248,248,0.5);
}

/* Just for demo */

.oval#oval2{ height: 300px; width: 300px; }
div{ float: left; }

<div class="oval">
  <img src='http://lorempixel.com/200/200/nature/1' />
</div>

<div class="oval" id="oval2">
  <img src='http://lorempixel.com/300/300/nature/1' />
</div>