CSS3问题：如何在div的顶部没有框阴影？

问题描述

现在，当我这样做时：

-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;

它在所有侧面都提供了阴影。我想要3面而不是顶部。如何防止阴影出现在顶部？

it gives a box shadow on all sides. I want it on 3 sides but not the top. How to prevent the shadow from appearing at the top?

推荐答案

如果您可以嵌套两个div，则应该可以使用边距和 overflow：hidden 的组合可以切掉顶部阴影，而不会损失其他边缘上的必需效果。

If you can nest two divs then you should be able to use a combination of margins and overflow:hidden to 'chop off' the top shadow without losing the required effect on the other edges.

例如以下标记：

<div class="outer">
    <div class="inner">hello</div>
</div>

此CSS

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

给出此结果-

这篇关于CSS3问题：如何在div的顶部没有框阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！