数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

box-shadow和drop-shadow实现不规则投影实例代码

来源:脚本之家  责任编辑:小易  

当我们想给一个矩形或其他能用 border-radius 生成的形状(在“自适应的椭圆”一节中可以看到一些示例)加投影时,box-shadow 的表现都堪称完美。但是,当元素添加了一些伪元素或半透明的装饰之后,它就有些力不从心了,因为 border-radius 会无耻地忽视透明部分。这类情况包括:

  • 半透明图像、背景图像、或者 border-image(比如老式的金质像框);
  • 元素设置了点状、虚线或半透明的边框,但没有背景(或者当background-clip 不是 border-box 时);
  • 对话气泡,它的小尾巴通常是用伪元素生成的;

如果我们打算对这类元素直接应用 box-shadow,那只能得到不完全投影的结果。难道我们只能完全放弃投影效果吗?有没有办法可以解决这个难题?

滤镜效果规范(http://w3.org/TR/filter-effects)为这个问题提供了一个解决方案。它引入了一个叫作 filter 的新属性,这个属性也是从 SVG 那里借鉴过来的。尽管 CSS 滤镜基本上就是 SVG 滤镜,但我们并不需要掌握任何SVG 知识。相反,只需要一些函数就可以很方便地指定滤镜效果了,比如blur()、grayscale() 以及我们需要的 drop-shadow() !如果你喜欢,甚至可以把多个滤镜串连起来,只要用空格把它们分隔开就可以了,比如:

filter: blur() grayscale() drop-shadow();

drop-shadow() 滤镜可接受的参数基本上跟 box-shadow 属性是一样的,但不包括扩张半径,不包括 inset 关键字,也不支持逗号分割的多层投影语法。举个例子,上面的投影:

box-shadow: 2px 2px 10px rgba(0,0,0,.5);

可以这样来写:

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

CSS 滤镜最大的好处在于,它们可以平稳退化:当浏览器不支持时,不会出现问题,只不过没有任何效果而已。如果你确实需要这个效果在尽可能多的浏览器中显示出来,可以同时附上一个 SVG 滤镜,这样可以得到稍微好一些的浏览器支持度。你可以在滤镜效果规范(http://www.w3.org/TR/filter-effects/)中为每个滤镜函数找到对应的 SVG 滤镜版本。你可以把 SVG滤镜和简化的 CSS 滤镜放在一起使用,让层叠机制来决定哪一行最终生效:

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

不幸的是,如果 SVG 滤镜是存放在一个独立文件里的,那它就无法像一个简洁易用的函数那样在 CSS 代码中进行随意配置;如果它是内联的,则又会搅乱你的代码。参数需要写死在文件内部,因此每当我们新加一种哪怕是大同小异的投影效果时,都需要多准备一个文件,这显然是难以接受的。当然,我们还可以使用 data URI(它也会省掉额外的 HTTP 请求),但这个方法仍然会带来文件体积的增长。总的来说,这个方法只是一种回退方案,因此只要我们把SVG 滤镜控制在一定数量以内,哪怕它们的效果大同小异,也是说得过去的。

另外一件需要牢记的事情就是,任何非透明的部分都会被一视同仁地打上投影,包括文本(如果背景是透明的),正如我们刚刚看到的那样。你可能会想,是不是可以通过 text-shadow: none; 来取消掉文本上的投影呢?其实 text-shadow 跟它是完全不相干的两码事,因此这样做并不能取消文本上的 drop-shadow() 效果。此外,如果你已经用 textshadow在文本上加了投影效果,文本投影还会被 drop-shadow() 滤镜再加上投影,这本质上是给投影打了投影!看看下面这段示例代码(请原谅它惨不忍睹的效果,这样只是为了凸显这个怪异的问题):

color: deeppink;
border: 2px solid;
text-shadow: .1em .2em yellow;
filter: drop-shadow(.05em .05em .1em gray);

你可以看到它的渲染效果,图中的文字被同时打上了 textshadow和 drop-shadow()。

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


  • 本文相关:
  • 使用css实现三角符号效果
  • css两端对齐之div+css布局实现2端对齐的4种方法总结
  • css不常见属性之pointer-events的使用方法
  • 详解css文件的三种引入方式
  • 使用css3制作齿轮loading动画效果
  • css中的position属性值的探究(小结)
  • css 实现滚动的图片栏 实例代码
  • css 小结笔记之变形、过渡与动画的示例
  • 15行css代码让苹果设备崩溃,最新的ios 12也无法幸免
  • css设置多列等高布局的方法示例
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved