CSS实用技巧

1 CSS中的 backdrop-filter 属性来实现毛玻璃特效

效果如下：

详情

backdrop-filter 属性可以为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素_背后_的所有元素，为了看到效果，必须使元素或其背景至少部分透明

2将文本设置为大写或小写

大写或小写字母可以不必在HTML中设置。可以在CSS中使用text-transform属性来强制任何文本为大写或小写。
 大写：text-transform: uppercase，小写：text-transform: lowercase

3 使用 ::first-letter 来实现文本首字母的下沉

p.text:first-letter { font-size:200%; color:#ba2be3 }

效果如下：

4 实现正方形

可以通过CSS中的纵横比来实现一个正方形，这样只需要设置一个宽度即可

.square { background:#ba2be3;width:25px;aspect-ratio: 1/1; }

aspect-ratio媒体属性可以用来测试视口的宽高比

5 :where() 简化代码

.parent div, .parent .title, .parent #article { color: red; }

这样的代码可读性不是很好，:where() 伪类这时候就派上用场了。**:where()**伪类函数接收选择器列表作为他的参数，将会选择所有能被选择器列表中任何一条规则选中的元素。上面的代码使用 :where()就可以这样写：

.parent:where(div, .title, #article) { color: red; }