通过CSS在盒子阴影的顶部有一个清晰的边缘？

作者: 12345
发布时间: 2024-04-16 05:43:44 (10天前)
转自：

4 条回复

0#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 根据 <a href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="nofollow"> 规格 </A> ，第二个值是垂直插图。只需更新该值即可获得“投影”效果： </p> <pre> box-shadow: 0 10px 10px #303030; </pre> <P> 也， <a href="http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow" rel="nofollow"> 看看这篇文章 </A> 对于其他一些很酷的效果你可以通过box-shadow实现。 </p> </DIV>

编辑
1#
回复此人
哇塞 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 彻底摆脱顶级阴影 <EM> 没有加长底部阴影 </EM> ，我的解决方案是在div中包含另一个带有白色背景的元素，并绝对定位它以隐藏顶部阴影。 </p> <pre> <code> <div> <span></span> </div> div { margin-top:20px; height:300px; width:300px; -webkit-box-shadow:0 0 10px #303030; position:relative; } span { display:block; position:absolute; top:-10px; height:10px; width:100%; background:#fff; } </code> </pre> <P> <a href="http://jsfiddle.net/QE8Bh/1/" rel="nofollow"> http://jsfiddle.net/QE8Bh/1/ </A> </p> </DIV>

编辑
2#
回复此人
庸人自扰1 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="http://jsfiddle.net/uXGKp/" rel="nofollow"> 演示 </A> </p> <pre> <code> div{ height: 300px; width: 300px; -webkit-box-shadow:0 5px 10px #303030; -moz-box-shadow:0 5px 10px #303030; box-shadow:0 5px 10px #303030; } </code> </pre> </DIV>

编辑

登录后才能参与评论