使用box-shadow实现对象投影效果

Question

我想在CSS中实现这个效果：

这是我的代码：

＆＃13;

＆＃13;

#test {position: relative;margin: 100px;}
#test::after {
  background-color: maroon;
  box-shadow: 0 -50px 10px 7px gray;
  height: 45px;
  left: -15px;
  position: absolute;
  top: 40px;
  transform: perspective(150px) rotateX(-45deg);
  transform-origin: center bottom 0;
  width: 60px;
  content: "";
}

＆＃13;

<div id="test"></div>

＆＃13;

＆＃13;

＆＃13;

但是我没有达到投射阴影的预期效果。我想知道它是否只能用CSS做到这一点？

Fiddle Demo

Answer 1

也许是这样的？我添加了另一个代表阴影的元素：

#shadow {
  height: 90px;
  left: -15px;
  position: absolute;
  top: 30px;
  background: rgba(0, 0, 0, 0);
  width: 60px;
  transform: perspective(50px) rotateX(25deg);
  box-shadow: 0 -106px 20px 17px #808080;
}

https://jsfiddle.net/zcyy09mp/4/

Answer 2

如my comment中所述，我通常会推荐my fiddle中使用的方法（也就是使用另一个伪元素）或Martin的答案中的方法（即使用额外的元素） ）但是正如你所提到的那样，已经使用了另一个伪元素而你试图避免任何额外的元素，另一种方法是使用渐变作为父元素的ArrayList。通过使用background，background-position的适当的左右渐变，我们不仅可以获得形状，还可以获得与阴影模糊性质非常相似的效果。

以下是一个示例代码段:( 输出也具有合理的响应性，您可以通过将鼠标悬停来看待）

background-size

#test {
  position: relative;
  height: 100px;
  width: 100px;
  margin: 100px;
  background: linear-gradient(to bottom right, transparent 45%, gray 55%), linear-gradient(to bottom left, transparent 45%, gray 55%), linear-gradient(to bottom, transparent, gray), linear-gradient(gray, gray);
  background-repeat: no-repeat;
  background-size: 30px 95%, 30px 95%, calc(100% - 60px) 8px, calc(100% - 60px) calc(100% - 8px);
  background-position: 0% 100%, 100% 100%, 50% 4px, 50% 100%;
}

#test::after {
  position: absolute;
  content: "";
  background-color: maroon;
  width: 100%;
  height: 45%;
  left: 0px;
  top: 100%;
  transform: perspective(150px) rotateX(-45deg);
  transform-origin: center top 0;
}

/* just for demo */

#test {
  transition: all 1s;
}
#test:hover {
  height: 200px;
  width: 200px;
}

在下面的代码片段中，我为每个渐变提供了不同的颜色，只是为了直观地展示它是如何实现的。

<div id="test"></div>

#test {
  position: relative;
  height: 100px;
  width: 100px;
  margin: 100px;
  background: linear-gradient(to bottom right, transparent 45%, red 55%), linear-gradient(to bottom left, transparent 45%, blue 55%), linear-gradient(to bottom, transparent, green), linear-gradient(rebeccapurple, rebeccapurple);
  background-repeat: no-repeat;
  background-size: 30px 95%, 30px 95%, calc(100% - 60px) 8px, calc(100% - 60px) calc(100% - 8px);
  background-position: 0% 100%, 100% 100%, 50% 4px, 50% 100%;
}

#test::after {
  position: absolute;
  content: "";
  background-color: maroon;
  width: 100%;
  height: 45%;
  left: 0px;
  top: 100%;
  transform: perspective(150px) rotateX(-45deg);
  transform-origin: center top 0;
}

/* just for demo */

#test {
  transition: all 1s;
}
#test:hover {
  height: 200px;
  width: 200px;
}

Answer 3

根据W3 spec，“'box-shadow'属性会将一个或多个 阴影 附加到框中”。您要创建的阴影不是drop shadow，因此没有可以在图片中生成阴影的CSS。

你可以达到的最接近的效果是使用negative spread radius：

将阴影从一条边缘推开

body {
  padding-top: 50px;
}
#test {
  margin: 0 auto;
  background-color: maroon;
  box-shadow: 0 -20px 7px -6px black;
  height: 45px;
  width: 60px;
  transform: perspective(150px) rotateX(-45deg);
  transform-origin: center bottom 0;
}

<div id="test"></div>