CSS3问题:如何在顶部没有盒子阴影?

前端之家收集整理的这篇文章主要介绍了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/

猜你在找的CSS相关文章