如何用 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

如果您能够将 <img /> 元素包装在容器标记（例如 <div> 中，则可以很容易地实现这一点。通过在父 div 上使用 :after 伪选择器，您可以使用 box-shadow.

实现类似的方法

例如，假设您有以下标记：

您可以添加以下 CSS 定义：

.image-round {
  border: 4px solid red;
  border-radius: 50%;
}

.image-shadow {
  display: inline-block;
  position: relative;
}
  .image-shadow:after {
    display: block;
    content: '';
    position: absolute;
    bottom: -30px;
    height: 10px;
    right: 5px;
    left: 5px;
    border-radius: 50%;
    background: #ccc;
    box-shadow: 0 0 10px 10px #ccc;
  }

当然，你可以修改:after伪元素的left和right属性来达到更好的外观。

jsFiddle Demo

Answer 2

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

这种方法的一个优点是产生的阴影具有响应性，因此它可以适应 container/image 大小的变化。

.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>

如何用 CSS3 制作图片阴影

How to make a picture shadow with CSS3

css

shadowbox

css-shapes