box-shadow实现一边内阴影、其余外阴影
如何使用 box-shadow 属性同时实现一个 div 的上边内阴影和其余三边外阴影?
解决方案:
box-shadow: 14px 0px 0 0 red, /* 上边内阴影 */ 0px -14px 0 0 blue, /* 左边外阴影 */ -11px 0px 0 0 yellow, /* 右边外阴影 */ inset -20px -13px 9px 16px pink; /* 下边内阴影 */
登录后复制
原理:
box-shadow 属性接受多个值,每个值代表一个阴影。阴影的顺序从左到右确定了阴影的叠加方式。在本例中,我们分别设置了上面(内阴影)、左面(外阴影)、右面(外阴影)、下面(内阴影)的阴影。通过使用 inset 关键字,可以实现内阴影效果。
补充:
box-shadow 属性的每个参数分别为:
- x 轴偏移量(正:右移、负:左移)
- y 轴偏移量(正:下移、负:上移)
- 模糊半径(阴影的模糊度)
- 扩散半径(阴影的扩散范围)
- 颜色
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容