如何使用CSS在设备下重现阴影
如何使用CSS在设备下重现阴影
提问于 2020-01-20 18:10:43
是否可以使用CSS来重现下图设备下的阴影？
以下CSS和其他变体不起作用：
filter: drop-shadow(rgba(22, 22, 22, 0.25) 0px 12px 15px);问题是集中设备下的阴影并将其展平。上面的CSS不能使阴影看起来像是投影在地面上。
Codepen：https://codepen.io/Crashalot/pen/MWYzoJV
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-20 18:29:43
伪元素更适合完成此任务，请参见下面的示例：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59821015
复制相关文章
相似问题
腾讯云开发者
