都是写阴影box-shadow跟drop-shadow有啥不同

最新推荐文章于 2025-02-17 15:15:30 发布

似俗似不俗

最新推荐文章于 2025-02-17 15:15:30 发布

阅读量596

点赞数 1

分类专栏： CSS 文章标签： CSS 前端 CSS3 HTML

本文链接：https://blog.csdn.net/BGD150809213/article/details/94610456

版权

本文探讨了CSS3中`drop-shadow`和`box-shadow`的差异。虽然两者都能创建阴影效果，但`box-shadow`应用于元素的边框盒，而`drop-shadow`则对整个元素进行阴影处理，类似光照效果。通过实例，展示了它们在对话框等复杂形状阴影应用上的不同。阅读本文，有助于理解如何在前端开发中更精确地控制阴影效果。

摘要由CSDN通过智能技术生成

`drop-shadow`是css3的`filter`滤镜属性的一个方法，它的主要作用是用来做阴影，下图是它的兼容性。

理论

本章我们主要来说一下【drop-shadow】和【box-shadow】的区别。
box-shadow和drop-shadow从功能上来都是给元素加阴影。从写法上来说，看起来很相似。

// box-shadow
box-shadow: x(水平位置), y(垂直位置), blur(模糊度), spread(扩散大小), color(颜色, inset(内/外阴影)，
// drop-shadow
filter: drop-shadow(offset-x ,offset-y, blur-radius, spread-radius, color)

这来看，两者的差距是只有【内/外阴影不同】，但按照MDN的官方定义上来说：【drop-shadow】是(投影/阴影)，所以他俩肯定是有区别的，根据实验的结果来说：【box-