CSS新用法 - mask、CSS嵌套语法🎐

type

status

date

slug

summary

解释：会用Photoshop的我解释为“剪贴蒙版”，不会用Photoshop的解释为通过遮罩或者裁切特定区域的图片的方式，来隐藏一个元素的部分或者全部可见区域。

比如我有两个图，要遮罩的图必须要有缝隙，不让无法透过前面的图看到后面的背景，我这里的第二个图就是背景透明的

一个基本的效果

我们有这样一张图片，现在需要在上面加上文字，由于背景复杂导致文字边缘很难看清，继而导致了文字的易读性并没有那么好

这时我们可能会想到使用backdrop-filter 加一个毛玻璃效果

一个矩形的毛玻璃效果显然非常突兀，因为可以明显感知到div和背景的边界，这时候我们就可以利用mask做一个羽化效果

这里mask后面的url是什么呢，其实是一个图，一个用css绘制的图

讲一下如何制作这个图，知道了如何制作，就可以自定义这个羽化边缘的半径了，就可以自行控制边缘是锐利些还是模糊些。

首先我们用css写一个这样的元素，不难对吧

我们再利用foreignObject元素，通过这个元素，可以将 HTML嵌入到SVG中，轻松实现 dom转图片的效果。回到这里，我们仅需要将上面的结果放到foreignObject元素中，由于需要自适应尺寸，这里的body宽高都是100%

如下

有了图片，我们就可以

当然我们可以不引入svg，这里推荐张鑫旭老师的SVG在线压缩合并工具，将这个转换一下，就有了上面那段代码，

当然这个阴影需要距离文字多远之类的各种尺寸数据，都是css调整的，或许你可以调整的更好

解释：如scss、less一般的嵌套css写法

常规写法下，选中a里面的b里面的c，需要这样写，即便是预处理器嵌套着写，最后生成的其实也是这样的代码

而现在，css原生支持嵌套写法了

总结：嵌套类不加&符号会产生后代选择器。使用&符号可以改变这种结果。它明确显示了如何连接嵌套选择器

目前来看，css的嵌套写法还没有预处理器强大，但是胜在不用编译，以下的写法是无效的（详见w3c）