使用 CSS 的一些技巧

👋属性值的计算过程

保证元素每一个 css 属性从完全没有，到都具有声明值

1. 从作者样式表、默认样式表中🌻确定声明值

2. 对样式值进行🌻层叠计算

1. 比较重要性：important > 作者样式 > 默认样式
2. 比较特殊性：内联 style > #id > .class > 元素标签 > *
3. 比较次序：靠后的样式优先

3. 从继承样式表中🌻确定声明值

4. 从默认样式表中🌻确定声明值

👋视觉格式化模型

👋特殊的 css 值

• initial：主动将某一css属性设为默认值
• unset：清除浏览器默认样式(全部清除all:unset)
• revert：恢复浏览器默认样式

👋灵活使用 css 变量

:root { --font: 16px; }
{ font-size: var(--font) }
{ font-size: calc( var(--font) * 2 ) }

👋使用 clip-path 对元素进行任意形状的裁剪

👋使用 box-decoration-break: clone 保持对行盒的截断样式

👋使用 filter 修改元素中的边缘像素点

毛玻璃：backdrop-filter: blur()