技术博客
直接写 background-clip: text 不会生效，必须配合 -webkit-background-clip: text 和 color: transparent 才能显示文字裁切效果。这是 WebKit 内核的私有行为，Chrome、Safari、Edge 新版本支持，Firefox 目前仍不支持（截至 2024 年稳定版）。
纯 CSS 实现吃豆人张嘴闭嘴，本质不是“画一张嘴”，而是用一个圆形裁出扇形缺口。关键在于：用 border-radius: 50% 得到正圆，再通过 clip-path 或「错位遮罩」模拟开口——但最轻量、兼容性最好的方式其实是旋转一个带缺口的圆弧形元素。不过更常用且稳妥的做法是：用两个重叠的 div，底层是完整圆，上层是旋转的扇形遮罩（或反向剪裁）。
直接写 CSS 规则就行，::selection 是标准伪元素，现代浏览器基本都支持（IE 不支持，Edge 12+ 开始支持）。它作用于用户鼠标拖拽选中的文本，不是所有元素都响应——比如 <input> 和 <textarea></textarea> 默认不生效，得额外加 ::-moz-selection（旧版 Firefox）或用 user-select: text 激活。
:empty 只匹配**完全不包含任何子节点**的元素，包括文本节点（哪怕是一个空格、换行符都不行）。它不是“视觉上为空”或“内容为空字符串”的判断器。
浏览器只在元素真正处于全屏状态（即通过 Element.requestFullscreen() 进入）时，才匹配 :fullscreen 伪类。直接写 CSS 却没调用 JS 全屏 API，样式必然不会触发。
因为它们源自 iPad 第一代的物理分辨率（768×1024），不是视口宽度，更不是用户真实浏览场景。现代移动端浏览器默认缩放、桌面端高 DPR 屏幕、折叠屏、竖屏笔记本都会让这些数值失效。
因为浏览器对transform和opacity的动画能走合成层（compositor thread），不触发重排重绘；而用left、top、width等属性驱动动画，每次变化都会强制同步计算样式+布局+绘制，尤其在低端设备或复杂页面里容易掉帧甚至肉眼可见闪烁。
直接用 :placeholder-shown 伪类就行，但它只对 <input> 和 <textarea></textarea> 生效，且必须是原生 placeholder 属性触发的占位符（不是 JS 模拟的）。
CSS Grid 是目前最直接、可控性最强的二维布局方案，适合构建固定结构或响应式网格系统；用 display: grid 就能启动，但关键在如何合理设置 grid-template-columns 和 grid-gap。
CSS 里根本不存在「100个颜色属性」——这是对 CSS 颜色体系的严重误解。真正可用的颜色相关属性只有 color、background-color、border-color、outline-color、fill、stroke 等寥寥几个，其余全是「值」，不是「属性」。