标签：box 早读 元素 投影 心扉 滤镜 半径 shadow CSS
【早读汇】上海@瑞心扉雪《CSS揭秘》笔记
前言
本篇笔记来自上海@瑞心扉雪关于《CSS揭秘》第四章笔记。
正文从这开始～
一、单侧投影
1、常规的box-shadow实现语法就不写啦。
2、单边投影
对元素使用4px的模糊半径意味着投影的尺寸会比元素本身的尺寸大约8px。这个如何解决呢?
最终的解决方案来自 box-shadow 鲜为人知的第四个长度参数。它排在模糊半径参数之后，称作扩张半径。
这个参数会根据你指定的值去扩大或(当指定负值时)缩小投影的尺寸。
举例来说，一个-5px的扩张半径会把投影的宽度和高度各减少10px(即每边各5px)。如Demo图一。
辣么把扩张半径设为负的模糊值不就看不见投影啦。再用偏移量来移动，不就形成单边投影啦。
3、邻边投影
技巧1:我们不应该把投影缩得太小，而是只需把阴影藏进一侧，另一侧自然露出就好。因此，扩张半径不应设为模糊半径的相反值，而应该是这个相反值的一半。
技巧2: 需要指定两个偏移量，因为我们希望投影在水平和垂直方向上同时移动。它们的值需要大于或等于模糊半径的一半，因为我们希望把投影藏进另外两条边之内。
4、双侧投影
因为扩张半径在四个方向上的作用是均等的（也就是说，我们无法指定投影在水平方向上放大，而在垂直方向上缩小） 唯一的办法是用两块投影（每边各一块）来达到目的。然后基本上就是把“单侧投影”中的技巧运用两次。
二、不规则投影
1、box-shadow不支持不规则投影。
（元素添加了一些伪元素或半透明的装饰之后）具体情形如下：
半透明图像、背景图像、或者 border-image （比如老式的金质像框）;
元素设置了点状、虚线或半透明的边框，但没有背景（或者当background-clip 不是 border-box 时）;
对话气泡，它的小尾巴通常是用伪元素生成的;
我们在“切角效果”一节中见过的切角形状;
几乎所有的折角效果，包括“折角效果”一节将提到的例子;
通过 clip-path 生成的形状，比如“菱形图片”一节中提到的菱形图像。
2、解决方案 （使用CSS滤镜）
例如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 滤镜，这样可以得到稍微好一些的浏览器支持度。
三、染色效果
1、使用滤镜
sepia()会给图片增加一种降饱和度的橙黄色染色效果，几乎所有像素的色相值会被收敛到 35~40。
如果我们想要的主色调的饱和度比这更高，可以用saturate()滤镜来给每个像素提升饱和度。
hue-roatate()滤镜，把每个像素的色相以指定的度数进行偏移。为了把原有的色相值40改变为335，需要增加大约295度(335-40)。
2、基于混合模式的方案
“混合模式”控制了上层元素的颜色与下层颜色进行混合的方式。
用它来实现染色效果时，需要用到的混合模式是luminosity。
这种luminosity混合模式会保留上层元素的HSL亮度信息，并从它的下层吸取色相和饱和度信息。
要对一个元素设置混合模式，有两个属性可以派上用场：
mix-blend-mode可以为整个元素设置混合模式
background-blend-mode可以为每层背景单独指定混合模式
使用这种策略有两种选择模式：
第一种选择：需要把图片包裹在一个容器中，并把容器的背景色设置为我们想要的主色调。
第二种选择：不用图片元素，而是用div元素——把这个元素的第一层背景设置为要染色的图片，并把第二层的背景设置为我们想要的主色调。
最后，文中涉及到的Demo链接
http://runjs.cn/code/h7z1dee8
http://runjs.cn/code/rwlu3nsx
http://runjs.cn/code/6iynubsr
标签：box,早读,元素,投影,心扉,滤镜,半径,shadow,CSS 来源： https://blog.51cto.com/15080028/2595030
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。