详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用


Posted in HTML / CSS onAugust 24, 2020

要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢?

一、兼容性不一

CSS3 box-shadow从IE9浏览器开始就支持了,兼容性如下截图:

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

filter中的drop-shadowIE13才开始支持,移动端Android4.4才开始支持。兼容性如下图:

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

二、同样的参数值,表现效果有差异

filter中的drop-shadow语法如下:

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

filter:drop-shadow(5px 5px 10px black)

表示右下5像素偏移,10像素模糊的黑色阴影。眼见为实,看下面的图片示意。

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

但是,如果使用同样参数值的box-shadow,例如:

box-shadow: 5px 5px 10px black;

会发现,box-shadow的阴影距离更小,色值要更深:

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

三、drop-shadow没有内阴影效果

box-shadow支持inset内阴影,如:

box-shadow: inset 5px 5px 10px black;

但是,drop-shadow却没有。

四、阴影 vs 盒阴影

drop-shadow有一个很厉害的特性,也就这一个特性,让其以后有足够的机会大放异彩!那就是,drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影而已。

什么意思呢?

下面我们用CSS border写一个虚线框,例如:

border: 10px dashed #fa608d;
    height: 50px;
    width: 50px;

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

然后,我们分别应用box-shadowdrop-shadow滤镜:

box-shadow: 5px 5px 10px black;
 filter: drop-shadow(5px 5px 10px black);

box-shadow:

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

filter:drop-shadow:

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

box-shadow顾名思意“盒阴影”,只是盒子的阴影;你想啊,这盒子中间明明是透明的,结果,阴影的时候,居然光线没有穿透;但是drop-shadow就符合真实世界的投影,非透明的颜色,我就有投影;透明部分,光线穿过,没投影,而什么盒子不盒子的,跟我没有任何关系。

drop-shadow不仅可以穿透代码构建的元素的透明部分,PNG图片的透明部分也是可以穿透的,如下图:

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

六、drop-shadow的实际应用

我们实现带有箭头指向的浮层面板的时候,考虑到兼容性,三角基本上都是使用border绘制的,没法box-shadow,但是,矩形部分设计师希望是有阴影的,

箭头没有阴影,蒙混过关。现在,有了drop-shadow,阴影就真的变成了阴影了。

CSS代码:
.box {
    margin: 40px; padding: 50px;
    background-color: #fff;
    position: relative;
    font-size: 24px;
}
.cor {
    position: absolute;
    left: -40px;
    widtd: 0; height: 0;
    overflow: hidden;
    border: 20px solid transparent;
    border-right-color: #fff;
}
.box-shadow {
    box-shadow: 5px 5px 10px black;
}
.drop-shadow {
    filter: drop-shadow(5px 5px 10px black);
}
HTML代码:
<div class="box box-shadow">
    <i class="cor"></i>
    box-shadow
</div>
<div class="box drop-shadow">
    <i class="cor"></i>
    filter: drop-shadow
</div>

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

到此这篇关于详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用的文章就介绍到这了,更多相关CSS3 filter:drop-shadow与box-shadow内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
css3实现动画的三种方式
Aug 24 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 #HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 #HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 #HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 #HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 #HTML / CSS
css3实现小箭头各种图形效果
Jul 08 #HTML / CSS
You might like
简化php模板页面中分页代码的解析
2009/02/06 PHP
PHP 模拟$_PUT实现代码
2010/03/15 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python线程池threadpool实现篇
2018/04/27 Python
python 日期排序的实例代码
2019/07/11 Python
pytorch打印网络结构的实例
2019/08/19 Python
python Selenium 库的使用技巧
2020/10/16 Python
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
自我评价范文点评
2013/12/04 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
公司保密管理制度
2015/08/04 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
大学生创业计划书
2019/06/24 职场文书
python flask框架快速入门
2021/05/14 Python
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技