如何解决CSS3问题:如何在div的顶部没有框阴影?
| 现在,当我这样做时:-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;
它在所有侧面都提供了阴影。我想要3面而不是顶部。如何防止阴影出现在顶部?
解决方法
如果可以嵌套两个div,则应该可以使用边距和“ 1”的组合来“切掉”顶部阴影,而不会损失其他边缘上的所需效果。
例如,此标记:
<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/
,box-shadow支持多个逗号,这意味着有可能,并且可以按照以下方式进行操作:
box-shadow: 2px 2px 3px #888,-2px 2px 3px #888;
第一组将阴影带到右侧和底部,而第二组将阴影带到左侧(通过使用负值)和底部。
跨浏览器支持的完整代码为:
-moz-box-shadow: 2px 2px 3px #888,-2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888,-2px 2px 3px #888;
box-shadow: 2px 2px 3px #888,-2px 2px 3px #888;
,仅具有垂直偏移量:
.shadow {
-moz-box-shadow: 0px 5px 200px #00C0FF;
-webkit-box-shadow: 0px 5px 200px #00C0FF;
box-shadow: 0px 5px 200px #00C0FF;
}
这样会将阴影向下移动,以使顶部的阴影更少。您将不得不使用它,以根据自己的情况选择它。该网站还提供了一些有关框阴影的重要信息,例如分层以及浏览器支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。