Question

我想让我的图像＃afb1的阴影转到页面底部，而阴影和页面底部之间没有空白页。这可能吗？

就像我将＃afb1的高度更改为500px时更高，但我希望它连接到页面底部

HTML：

<div id="pics">

        <div id="afb1">
            <img src="Images/Chingy.png" alt="mooiboy" height="200" width="200"                                onmouseover="this.src='Images/chingy.jpg'" onmouseout="this.src='Images/Chingy.png'">
        </div>
</div>

的CSS：

#pics{
margin: 0 auto;
text-align: center;
width:880px;
height:100%;
}

#pics img{
    border-radius: 100px;
}

#afb1{
    float:left;
    height:100%;
    box-shadow: 2px 0px 21px 0px rgba(50, 50, 50, 0.35);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    margin-right: 20px;
}

http://jsfiddle.net/7fA78/

Answer 1

页面的100％。问题是你的页面不是100％的窗口。添加此

body,html{
    margin: 0;
    padding:0;
    height: 100%;
}

Answer 2

如果我理解正确你只需要像这样的图像底部

#afb1{
    float:left;
    height:100%;
    box-shadow: 1px 10px 5px -1px rgba(50, 50, 50, 0.35);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    margin-right: 20px;
}

你需要调整这些设置box-shadow： 1px 10px 5px -1px rgba（50,50,50,0.35）;

有没有办法让盒子阴影到达页面底部？

2 个答案: