How to Achieve Horizontal Box Shadows
如何在不借助任何技巧或图像的情况下,仅在左右(水平?)侧实现 box-shadow 效果?
使用以下代码会产生四周围绕的阴影效果:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
解决方法:使用多个 box-shadow
可以通过使用多个 box-shadow 解决此问题,每个 box-shadow 对应一侧:
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
Masking 不完善的阴影(可选)
为了进一步掩盖 bleeding 出的效果,可以在底部和顶部添加两层 box-shadow 进行掩盖:
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
以上是如何在没有图像或技巧的情况下创建水平盒阴影?的详细内容。更多信息请关注PHP中文网其他相关文章!