如何仅使用CSS创建透视阴影？ [英] How to create a perspective shadow with CSS only?

问题描述

我知道CSS中的 box-shadow 属性，但这会产生一个阴影，看起来像是投射在元素后面的墙上。我需要创建一个阴影，看起来像元素正像这样站在地面上：

I know about the box-shadow property in CSS, but this produces a shadow that looks like being projected on a wall right behind the element. I need to create a shadow that looks like the element is standing on the ground like this:

这是我到目前为止的内容：

This is what I have so far:

div {
  display: inline-block;
  height: 150px;
  width: 150px;
  background: url(//placehold.it/150x150);
  margin-left: 20px;
  box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75);
}

<div></div>
<div></div>

推荐答案

您无需使用 box-shadow 属性在元素本身上，但在伪元素 :: before 。

You can achieve this without using the box-shadow property on the element itself, but on the pseudo element ::before.

• 转换：skewX（60deg）; 使其看起来像光源来自侧面


• 高度：10％； 使其看起来像投射在地面上


• 宽度：70％，某些定位会隐藏实际元素


• 最后是 box-shadow：-25px -4px 4px 0 rgba（0,0,0,0.75）; 会产生阴影

• transform: skewX(60deg); will make it look like the light source is coming from the side
• height: 10%; will make it look like projected on the ground
• width: 70% and some positioning will hide the actual element
• And at last box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75); will produce the shadow

当然，对于较旧的浏览器，应使用供应商前缀。

Of course for older browsers you should use vendor prefixes.

div {
  position: relative;
  display: inline-block;
  height: 150px;
  width: 150px;
  background: url(//placehold.it/150x150);
  margin-left: 30px;
}
div::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 15px;
  height: 10%;
  width: 70%;
  box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);
  transform: skewX(60deg);
}

<div></div>
<div></div>

这篇关于如何仅使用CSS创建透视阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！