【早读汇】上海@瑞心扉雪《CSS揭秘》笔记

前言

本篇笔记来自上海@瑞心扉雪关于《CSS揭秘》第四章笔记。

正文从这开始～

一、单侧投影

1、常规的box-shadow实现语法就不写啦。

2、单边投影

对元素使用4px的模糊半径意味着投影的尺寸会比元素本身的尺寸大约8px。这个如何解决呢?

最终的解决方案来自 box-shadow 鲜为人知的第四个长度参数。它排在模糊半径参数之后，称作扩张半径。

这个参数会根据你指定的值去扩大或(当指定负值时)缩小投影的尺寸。

举例来说，一个-5px的扩张半径会把投影的宽度和高度各减少10px(即每边各5px)。如Demo图一。

辣么把扩张半径设为负的模糊值不就看不见投影啦。再用偏移量来移动，不就形成单边投影啦。

3、邻边投影

技巧1:我们不应该把投影缩得太小，而是只需把阴影藏进一侧，另一侧自然露出就好。因此，扩张半径不应设为模糊半径的相反值，而应该是这个相反值的一半。

技巧2: 需要指定两个偏移量，因为我们希望投影在水平和垂直方向上同时移动。它们的值需要大于或等于模糊半径的一半，因为我们希望把投影藏进另外两条边之内。

4、双侧投影

因为扩张半径在四个方向上的作用是均等的（也就是说，我们无法指定投影在水平方向上放大，而在垂直方向上缩小）唯一的办法是用两块投影（每边各一块）来达到目的。然后基本上就是把“单侧投影”中的技巧运用两次。

二、不规则投影

1、box-shadow不支持不规则投影。

（元素添加了一些伪元素或半透明的装饰之后）具体情形如下：

我们在“切角效果”一节中见过的切角形状;

几乎所有的折角效果，包括“折角效果”一节将提到的例子;

通过 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亮度信息，并从它的下层吸取色相和饱和度信息。

要对一个元素设置混合模式，有两个属性可以派上用场：

使用这种策略有两种选择模式：

最后，文中涉及到的Demo链接