使用 css 可以将图像反射为阴影吗？

Question

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

Image Reflection Shadows

显示反射的图像示例：

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

Answer 1

是的，当然。你必须使用 CSS3 -webkit-box-reflect: below;
各种各样的例子是 here

Answer 2

是的！您可以使用 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>

Answer 3

我还没有遇到过与描述的一样的事情； 但是，您可能对以下内容感兴趣

Using CSS Filter property to Create Ambient-Light round Images

当颜色和背景之间的对比度高时效果更好

所有版权归原作者所有 Codepen.io

body {background: #111}

.img {
  position: relative;
  display: inline-block;
  margin: 40px;
  height: 236px;
  width: 420px;
  border-radius: 5px;
  box-shadow: 0px 50px 100px -30px rgba(0,0,0,1);
}
.img:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  filter: blur(50px) contrast(3);
  z-index: -1;
}

.first, .first:after {
  background: url("http://images.smh.com.au/2013/02/13/4028970/--art_wrestling_20130213154720739962-420x0.jpg");
}

.second, .second:after {
background: url("http://images.theage.com.au/2014/04/02/5317898/ZAH_hawk_LW-20140402235602816699-420x0.jpg");
}

<body>
<div class="container">
<div class="img first"></div>
<div class="img second"></div>
</div>
</body>

使用 css 可以将图像反射为阴影吗？

Can images be reflected as a shadow using css?

html

css

shadow