我正在尝试为网站创建不均匀的阴影效果,请参考下面的示例图:
不幸的是,我认为这不能通过CSS3来实现。据我所知,box-shadow属性只能用于创建均匀分布的阴影。
然而,我的CSS3/HTML5知识有限,我想知道是否有任何方法可以在不使用图像/额外div/相对和绝对定位的情况下实现这一点,因为我宁愿避免这些方法。
![enter image description here](https://istack.dev59.com/C06d9.webp)
然而,我的CSS3/HTML5知识有限,我想知道是否有任何方法可以在不使用图像/额外div/相对和绝对定位的情况下实现这一点,因为我宁愿避免这些方法。
HTML
<div class="container"></div>
<div class="shadow"></div>
CSS
.container {
width: 300px;
height: 200px;
margin: 50px;
background-color: #eeeeee;
z-index: 1;
}
.shadow {
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
box-shadow: 0 6px 16px -6px black;
height: 20px;
width: 300px;
position: absolute;
top: 225px;
z-index: -1;
left: 50px;
}
position: relative;
的 div 中,并且还有一件事就是它是 CSS3,所以请确保它支持所有浏览器,当然我已经添加了所有专有的 CSS,但还是要注意一下 ;) - Mr. Aliendiv::after{
content:"";
display:block;
transform:rotate(5deg);
box-shadow:1px 5px 50px #444;
z-index:-1;
}
我猜你想要玩一下值,尝试尽可能接近原始值。
可以的,只需要使用几个属性。例如:
html:
<div class="main">
<div class="shadow-phantom">
</div>
</div>
CSS:
.main {
width:100px;
height:100px;
background-color:#e1e1e1;
margin:10px auto;
}
.shadow-phantom {
-webkit-border-radius: 12px 110px 20px 25px;
border-radius: 12px 110px 20px 25px;
margin: -4px 0px 0px -0px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 7px 7px 10px 0px #AAA;
box-shadow: 7px 7px 10px 0px #AAA;
width:90px;
height:100px;
position:absolute;
z-index:-1;
-webkit-transform: rotate(5.5deg);
-moz-transform: rotate(5.5deg);
-ms-transform: rotate(5.5deg);
-o-transform: rotate(5.5deg);
transform: rotate(5.5deg);
}
请查看此代码片段以查看其实际效果:http://jsfiddle.net/wandarkaf/MKV4Q/