这是一个阴影,我试图只使用CSS复制,我只是无法弄清楚如何做到这一点.我花了好几个小时尝试.我想我需要创建2个阴影元素,但我不知道如何继续.
我得到的最接近的是这个(一个糟糕的尝试 – 我知道):
.type-product:before,.type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
Box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
如果任何CSS大师可以提供任何帮助,那么最感谢.
注意:我不认为this link完全涵盖了我的问题.它只讨论了曲线 – 虽然我需要一条带有颜色渐变的曲线……
最佳答案
您可以使用:在伪元素和Box-shadow之前执行此操作
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
Box-shadow: 0px -54px 13px -47px #000000,-4px -45px 35px -28px #999999;
}
原文地址:https://www.jb51.cc/css/427659.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。