是否可以使用CSS再现下图设备下的阴影?
以下 CSS 和不同变体不起作用:
filter: drop-shadow(rgba(22, 22, 22, 0.25) 0px 12px 15px);
问题在于将阴影集中在设备下方并将其压平。上面的 CSS 无法使阴影看起来就像投影在地面上一样。
最佳答案
伪元素更适合完成此任务,请参见下面的示例:
.object {
margin: 20px;
width: 70px;
height: 140px;
position: relative;
border-style: solid;
background: #E6E6FA;
}
.object:before {
content:"";
z-index: -1;
position: absolute;
bottom: -50%;
width: inherit;
height: inherit;
border-radius: 40%;
background: rgba(0,0,0,.55);
transform: scaleX(1.3) scaleY(0.12);
filter: blur(5px);
}
<div class="object"></div>
或者,您可以使用 box-shadow:
.object {
margin: 20px;
width: 70px;
height: 140px;
position: relative;
border-style: solid;
background: #E6E6FA;
/* This is .shadow-lg from tailwindCSS */
/* See https://tailwindcss.com/docs/box-shadow/ */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
<div class="object"></div>
关于css - 如何使用CSS再现设备下的阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59821015/