CSS阴影效果的比较：drop-Shadow与box-Shadow

bigdevil_s 发布于2019-08-30 11:00 / 2569人阅读

摘要：区块内的小区块的影子可以反应出区块内所有元素的形状则是直接对区块反应出矩形的影子。与不同点没有内部边框及距离二种特性。

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。

GPU云服务器云服务器阴影效果添加阴影效果 html上阴影效果 html设置阴影效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114708.html

你所不知道的 CSS 阴影技巧与细节

摘要：本文的题目是阴影技巧与细节。立体投影好，我们继续。下一个主题是立体投影。但是，使用它们生成的阴影通常只能是单色或者同色系的。你这么说，难道还可以生成渐变色的阴影不成额，当然不行。关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。最近一个新的项目，CSS-Inspira...

supernavy 2019-08-29 17:12 评论0 收藏0
你所不知道的 CSS 阴影技巧与细节

摘要：本文的题目是阴影技巧与细节。下一个主题是立体投影。正常而言，我们使用来生成文字阴影，像这样嗯，挺好的，就是不够立体。但是，使用它们生成的阴影通常只能是单色或者同色系的。你这么说，难道还可以生成渐变色的阴影不成额，当然不行。关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。最近...

stormzhang 2019-04-23 13:13 评论0 收藏0
css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
CSS3 filter（滤镜）属性

摘要：的滤镜属性，可以对网页中的图片进行类似图片处理的效果，例如背景的毛玻璃效果老照片黑白照片火焰效果等。理论上说，对比度是指画面黑白明暗的层次饱和度画面中色彩的鲜艳程度与层次 css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。 showImg(https://segmentfault.com/i...

haoguo 2019-08-30 10:58 评论0 收藏0