html - 可以使用 css 将图像反射(reflect)为阴影吗？

Question

我见过很多这种风格的设计:

Image Reflection Shadows

显示反射的图像示例:

我只是想知道这是否有可能编码。我一直在寻找一种方法来做到这一点，但没有找到运气。我只是想要一些许可。是为了好看还是有可能？

Answer 1

是的!您可以使用 CSS 和 filter: blur();

来做到这一点

演示 http://jsbin.com/nidekeyajo/edit?html,css,js,output

* {
  box-sizing: border-box;
  margin: 0;
}

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

.wrap {
  margin: 0 auto;
  max-width: 400px;
  position: relative;
}

.image {
  display: block;
  position: relative;
  z-index: 2;
}

.shadow {
  bottom: -30px;
  filter: blur(20px);/* this is the magic part */
  height: 100%;
  left: 0;
  position: absolute;
  transform: scale(0.95);
  width: 100%;
  z-index: 1;
}

<div class="wrap">
  <img class="image" src="https://lorempixel.com/800/450/nature/3/" alt="rocky shore">
  <img class="shadow" src="https://lorempixel.com/800/450/nature/3/" alt="">
</div>