技术博客
它不是真正的电影级调色，而是用 filter: url(#my-lut) 或 background-image: url(lut.png) 借助 3D 查找表（Look-Up Table）对颜色做批量映射。浏览器不原生支持 .cube 文件解析，必须转成可渲染格式——比如一张 64×64×64 的 PNG（实际是 64×64 网格，每格代表一个 RGB 输入对应的输出），或 SVG <fecomponenttransfer></fecomponenttransfer> 模拟查表逻辑。
光泽感本质是模拟高光+阴影的物理反射，CSS 里靠 box-shadow 的多层偏移和透明度控制来骗过人眼。不是加得越多越好，通常 2–3 层足够：一层紧贴边缘的浅色高光（正偏移、小模糊），一层稍远的深色压暗（负偏移、稍大模糊），可能再加一层极淡的底层衬托。
alpha值不是额外加上的效果，而是颜色本身的一部分——它直接决定这个颜色在渲染时和背景混合的权重。值为0时，颜色完全不参与显示（相当于没画）；值为1时，颜色完全覆盖背景；中间值如0.3，表示该颜色贡献30%亮度，背景贡献70%。这不是“淡一点”的视觉错觉，而是浏览器按公式R = R₁×α + R₂×(1−α)逐像素算出来的合成结果。
rgba不是万能的透明方案，border渲染依赖完整的四个参数：红、绿、蓝、透明度。常见错误是写成rgba(0, 0, 0, 0)——这会让边框完全不可见，但开发者误以为“语法错了”，其实只是alpha=0导致视觉上消失。
能，而且不需要任何JavaScript。核心是利用 input[type="checkbox"] 的隐藏状态 + label 关联 + ::before/::after 伪元素模拟滑块和轨道。关键不是“画得多像”，而是“点击区域够大、状态切换即时、视觉反馈明确”。
直接写 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 激活。
直接用 linear-gradient() 做背景时，如果没指定颜色透明度或 fallback 色，常出现“渐变没生效”“背景全黑/全白”的错觉——其实不是没渲染，而是起止色相同、方向写反、或被后续 background-color 盖住了。
不是所有 CSS 属性都能被 transition 动画化，写错了就完全没效果，连控制台都不报错，纯靠肉眼“感觉不动”。关键看浏览器是否把该属性列为「可动画化属性」（animatable）。