这是一个非常简单的问题,我无法弄清楚。
我想让一个阴影一直穿过 div 的底部。事实上,它覆盖了大部分底部:
这是代码:
box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)
我需要影子从两边一直穿过。
谢谢
编辑:我会错吗?我应该使用其他一些 CSS 属性吗?
这是一个非常简单的问题,我无法弄清楚。
我想让一个阴影一直穿过 div 的底部。事实上,它覆盖了大部分底部:
这是代码:
box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)
我需要影子从两边一直穿过。
谢谢
编辑:我会错吗?我应该使用其他一些 CSS 属性吗?
有一个解决方案,使用一个额外的 div,比原来的大,绝对定位。在此处查看一个工作示例:http: //jsfiddle.net/martinschaer/MHs5R/
<div class="container">
<div class="content"></div>
<div class="shadow"></div>
</div>
和 de CSS:
.container{
position: relative;
background-color: #f0f0f0;
padding: 20px;
}
.content{
height: 200px;
width: 200px;
background-color: #fff;
}
.shadow{
-webkit-box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49);
box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49);
position: absolute;
top: 20px; /* .container top padding */
left: 13.5px; /* 20 - (15/2) = .container left padding - (shadow spread / 2) */
width: 215px; /* .content width + shadow spread */
height: 200px;
}
要避免顶部阴影,请添加垂直偏移并相应地调整其他参数。此外,将传播距离设置为 0 或更大,您将覆盖水平边框。
从这个开始:
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)
如果您没有覆盖完整的水平边框,请稍微增加第 4 个值,直到它看起来不错。如果需要,也相应地调整您的垂直偏移。
查看实际框的 html / css 也会很有帮助。
box-shadow参数依次为:
水平偏移量、垂直偏移量、模糊距离、阴影散布距离、颜色值
我想你需要的是这个box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.49)
div {
background-color: #FFF;
border: 1px solid #888;
width: 100px;
height: 100px;
box-shadow: 0px 10px 5px -2px #888 ;
}