[CSS揭秘]不规则投影

难点

普通元素添加border-radius所生成的形状添加box-shadow的效果都非常完美。但是当普通元素添加了伪元素或者半透明的装饰之后，box-shadow就会有点力不从心。因为boder-radius会无耻地忽视透明部分。

场景:

1. 半透明图像，背景图像，border-image

2. 具有点状、虚线或者半透明的边框，但是没有背景

3. 伪元素生成的对话气泡

4. 切角形状

5. 折角形状

6. 菱形图像

解决不规则形状的投影，目前最简单的方法就是使用filter滤镜，使用CSS滤镜最大的好处就是平稳退化。

常用的filter滤镜函数包括: blur() grayscale() drop-shadow()

滤镜会把任何非透明的部分都打上投影, 所以不建议对文本单独再设置text-shadow, 同时这个text-shadow与box-shadow产生的shadow效果是两回事。

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

BOX-SHADOW

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

Filter

下次细讲 blur() grayscale()

转载于:https://www.cnblogs.com/joyjoe/p/6201189.html

[CSS揭秘]不规则投影相关推荐

《CSS揭秘》读书笔记
摘要 <CSS揭秘>主要是介绍了使用CSS的技巧,通过47个案例来灵活的使用CSS进行实现,同时在实现过程中注重CSS代码的灵活性与健壮性.通过阅读这本书有利于我们编写高质量的CSS代码以 ...
《CSS揭秘》-总结47个Css技巧（一）：常用的背景与边框技巧
注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...
css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法译该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
css常用效果总结,《CSS揭秘》-总结47个Css技巧（三）：视觉效果
注:本文案例转载于<CSS揭秘>这本书. 单侧投影使用 box-shadow 的第四个参数:扩张半径. box-shadow 0 8px 3px -3px rgba(0,0,0,.5)/ ...
《CSS揭秘》笔记（一）
前言我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
css 对话框阴影,科技常识：css实现不规则图形的阴影（如对话框）
今天小编跟大家讲解下有关css实现不规则图形的阴影(如对话框) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css实现不规则图形的阴影(如对话框) 的相关资料,希望小伙伴们看了有所帮助. ...
css揭秘实战技巧 - 形状 [二]
全目录本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css ...
CSS揭秘：6.复杂的背景图案（下）
文章目录前言一.网格Svg svg css 小结相关阅读前言上一篇文章中我们学会了如何使用实现棋盘背景的方法,但是显而易见的代码量是比较多的.那么怎么可以优化代码量,降低维护成本呢? 一.网 ...
CSS揭秘：5.条纹背景（上）
文章目录条纹背景 CSS线性渐变 css线性渐变小结 background-size 水平条纹水平 First Try 水平 Second Try 水平 Third Try 水平 Forth Tr ...
双18期|CSS揭秘之简写属性
theme: channing-cyan highlight: a11y-dark 双18期|CSS揭秘之简写属性 tips:每个技术点都值得优学优写:18期一.写在前面 css 简写属性了解吗?前 ...

[CSS揭秘]不规则投影

[CSS揭秘]不规则投影相关推荐

最新文章

热门文章