CSS3问题：如何在顶部没有盒子阴影？

现在当我这样做：

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

它给了所有方面的盒子阴影。我想要三面，但不是顶。如何防止阴影出现在顶端？

解决方法

如果您可以嵌套两个div，那么您应该能够使用边距和溢出的组合：隐藏以“切断”顶部阴影，而不会在其他边缘丢失所需的效果。

例如这个标记：

<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;
}

给出这个结果 – http://jsfiddle.net/ajcw/SLTE7/2/

原文地址：https://www.jb51.cc/css/218074.html