您现在的位置是：网站首页> 编程资料编程资料

CSS阴影效果的比较之drop-Shadow与box-ShadowCSS 阴影动画优化技巧JS+css3实现带阴影可点击旋转的3D立体杯子效果源码CSS 翘边阴影的实现代码CSS 曲线阴影实现的示例代码css实现悬浮效果的阴影的方法示例css实现多边形和梯形盒阴影技巧CSS中使用文本阴影与元素阴影效果

2021-09-04 916人已围观

简介这篇文章主要介绍了CSS阴影效果的比较之drop-Shadow与box-Shadow，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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则是把边框和里面的内容当成是一个完整的方块、并制造出整个方块的影子，而边框的样式会被忽略，直接当成是实线框。

 .box { border: 5px solid #262b57; width: 120px; height: 120px; border-radius: 10px; transform: rotate(15deg); font-size: 40px; text-align: center; line-height: 120px; } .dashed { border-style: dashed; }

背景与透明度

如果方块有设定颜色（不是透明的），drop-shadow与box-shadow的阴影效果看来就会差不多。如果方块的背景是半透明的呢？我们可以从图片中发现，影子周围的颜色比较深，中间的颜色比较淡，所以可以推论出透明度对drop-shadow会造成影响、对box-shadow则没有影响。

 .bk { background-color: #ffcc66; } .bk-alpha { background-color: rgba(255, 204, 102, 0.3); }

图形边框（image border）

由示例中我们得知drop-shadow可以反应出image-border不规则的形状，box-shadow则是将边框直接视为实心框，忽略边框图片的形状。图片中的猫头鹰是透明的PNG图档，drop-shadow不仅反应出边框图片的形状、也反应出边框内猫头鹰的形状；box-shadow则是秉持一贯的原则、将边框和图片视为一个完整的方块。

 .frame { width: 286px; height: 240px; -moz-border-image: url(frame_green_.png) 25 25 repeat; -webkit-border-image: url(frame_green_.png) 25 25 repeat; border-width: 25px; border-image: url(frame_green_.png) 25 25 repeat; border-color: #79b218; border-style: inset; border-width: 25px; box-sizing: border-box; display: block; margin: 10px; }

伪元素

伪元素drop-shadow可以反应出伪元素的形状，box-shadow则是会忽略伪元素。

 .addition { width: 100px; height: 100px; background-color: #ffcc66; margin: 10px 60px; position: relative; display: inline-block; } .addition:before { width: 50px; height: 50px; background-color: #ff8833; content: ''; display: block; position: absolute; left: 0; top: 50%; margin-left: -40px; transform: rotate(45deg); margin-top: -10px; } .addition:after { width: 60px; height: 60px; background-color: #ff8833; margin: 10px; content: ''; display: block; transform: rotate(20deg); transform: skew(20deg, 20deg); top: 5px; right: -40px; position: absolute; }

区块内的小区块

drop-shadow的影子可以反应出区块内所有元素的形状、box-shadow则是直接对区块反应出矩形的影子。

 .square { width: 50px; height: 50px; display: inline-block; background-color: #ffcc66; margin: 20px; } .circle { width: 50px; height: 50px; display: inline-block; border-radius: 50%; background-color: #ff8833; margin: 20px; }

drop-shadow
box-shadow

drop-shadow与box-shadow不同点

drop-shadow没有内部边框（inset shadow）及距离（spread）二种特性。就支持性部份来说，目前IE还不支持drop-shadow属性；而所有浏览器都已经普遍支持box-shadow。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：移动端布局之动态rem的实现CSS3移动端vw+rem不依赖JS实现响应式布局的方法移动端优先的flex三栏布局的使用方法移动端rem布局的两种实现方法详解H5 活动页之移动端 REM 布局适配方法浅谈移动端的自适应布局问题(响应式、rem/em、Js动态)Web移动端布局那些事移动端Web页面的CSS3 flex布局快速上手指南像素密度与CSS3的viewport在移动端Web响应式布局中的运用

下一篇：CSS3实现炫酷的切片式图片轮播效果CSS3实现带视差背景渐变效果的平滑图片轮播幻灯片特效源码html5+css3制作全屏响应式图片滑动轮播预览特效源码html5+css3实现的3D倾斜图片轮播切换特效源码js和CSS3炫酷3D轮播图翻转特效手把手教你用纯css3实现轮播图效果实例纯CSS3实现图片无间断轮播效果基于jquery+css3实现的通栏响应式图片轮播动画特效源码纯CSS实现的图片轮播(幻灯片)效果代码

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢