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

type
status
date
slug
summary
tags
category
icon
password

mask

解释:会用Photoshop的我解释为“剪贴蒙版”,不会用Photoshop的解释为通过遮罩或者裁切特定区域的图片的方式,来隐藏一个元素的部分或者全部可见区域。
比如我有两个图,要遮罩的图必须要有缝隙,不让无法透过前面的图看到后面的背景,我这里的第二个图就是背景透明的
notion image
一个基本的效果

可能这种效果基本没什么用,那来说一个比较有用的操作

我们有这样一张图片,现在需要在上面加上文字,由于背景复杂导致文字边缘很难看清,继而导致了文字的易读性并没有那么好
notion image
这时我们可能会想到使用backdrop-filter 加一个毛玻璃效果
notion image
一个矩形的毛玻璃效果显然非常突兀,因为可以明显感知到div和背景的边界,这时候我们就可以利用mask做一个羽化效果
notion image
这里mask后面的url是什么呢,其实是一个图,一个用css绘制的图
notion image
讲一下如何制作这个图,知道了如何制作,就可以自定义这个羽化边缘的半径了,就可以自行控制边缘是锐利些还是模糊些。
首先我们用css写一个这样的元素,不难对吧
我们再利用foreignObject元素,通过这个元素,可以将 HTML嵌入到SVG中,轻松实现 dom转图片的效果。回到这里,我们仅需要将上面的结果放到foreignObject元素中,由于需要自适应尺寸,这里的body宽高都是100%
如下
有了图片,我们就可以
当然我们可以不引入svg,这里推荐张鑫旭老师的SVG在线压缩合并工具,将这个转换一下,就有了上面那段代码,
当然这个阴影需要距离文字多远之类的各种尺寸数据,都是css调整的,或许你可以调整的更好
 

或者是用mask做一个Loading的图标


CSS嵌套语法 - Chrome112+

解释:如scss、less一般的嵌套css写法
常规写法下,选中a里面的b里面的c,需要这样写,即便是预处理器嵌套着写,最后生成的其实也是这样的代码
 
而现在,css原生支持嵌套写法了
 
总结:嵌套类不加&符号会产生后代选择器。使用&符号可以改变这种结果。它明确显示了如何连接嵌套选择器

无效的嵌套示例

目前来看,css的嵌套写法还没有预处理器强大,但是胜在不用编译,以下的写法是无效的
如何向人类提问 [译]CSS新用法 - @property、initial-letter、color-mix()、@media范围写法🎐
前端技术
AI技术
拙见
工具应用
其他知识
编程知识