web前端入门到实战：CSS阴影效果的比较 drop-Shadow与box-Shadow

最新推荐文章于 2024-04-08 23:51:29 发布

魔方编程

最新推荐文章于 2024-04-08 23:51:29 发布

阅读量736

点赞数

文章标签： css 前端 web前端前端开发网页制作

本文链接：https://blog.csdn.net/wewfdf/article/details/100527595

版权

本文探讨了CSS中的drop-shadow和box-shadow属性，详细阐述了它们在制作阴影效果时的区别，包括边框和变形效果、背景与透明度、图形边框、伪元素以及区块内的元素处理。drop-shadow能反映不透明区域的形状，而box-shadow则将边框和内容视为整体。此外，drop-shadow对透明度敏感，且不支持inset和distance特性，而box-shadow在浏览器支持上更为广泛。

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

drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法：

.drop-shadow {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))
}

.box-shadow {
    box-shadow: 12px 12px 7px rgba(0, 0, 0, 0.7);
}

因为都是阴影效果（光晕效果），所以二者可以设定的参数（value）几乎一样：以上面的例子来说，参数的所有数值从左到右代表了：水平偏移，垂直偏移，阴影模糊距离阴影颜色。接下来将为您进一步比较drop-shadow与box-shadow

边框和变形效果

drop-shadow与box-shadow的阴影都可以反应出边框圆角和变形效果。不同的是：drop-shadow反应出实际边框的形状、实线框有实线的影子、虚线框有虚线的影子；box-shadow则是把边框和里面的内容当成是一个完整的方块、并制造出整个方块的影子，而边框的样式会被忽略，直接当成是实线框。