如何在没有图像或技巧的情况下创建水平盒阴影？

Mary-Kate Olsen

发布： 2024-12-01 11:06:11

原创

171 人浏览过

How to Create Horizontal Box Shadows Without Images or Tricks?

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中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章