技术博客
老报纸不是靠“做旧滤镜”骗人，核心是视觉节奏——窄栏、密行、留白克制。现代屏幕宽，column-count: 3 是安全起点；column-count: 4 更接近《纽约时报》1920年代铅印版的实际栏宽比。别硬套 column-count: 2，两栏在14英寸屏上每栏太宽，字行长过65字符，眼睛扫读会累。
alpha值不是额外加上的效果，而是颜色本身的一部分——它直接决定这个颜色在渲染时和背景混合的权重。值为0时，颜色完全不参与显示（相当于没画）；值为1时，颜色完全覆盖背景；中间值如0.3，表示该颜色贡献30%亮度，背景贡献70%。这不是“淡一点”的视觉错觉，而是浏览器按公式R = R₁×α + R₂×(1−α)逐像素算出来的合成结果。
直接用 class 控制样式，等于把表现逻辑硬编码进 HTML 结构里——一旦组件重构、DOM 层级变动，.sidebar .item .title 这类选择器立刻失效。改用 data- 属性（如 data-role="header"）做样式锚点，能明确区分「结构语义」和「样式意图」。
它只对 flex-wrap: wrap 或 wrap-reverse 且**至少两行以上**的 flex 容器生效。单行 flex（默认 flex-wrap: nowrap）下，align-content 完全无效——此时该用 align-items 控制单行内项目的垂直对齐。
rgba不是万能的透明方案，border渲染依赖完整的四个参数：红、绿、蓝、透明度。常见错误是写成rgba(0, 0, 0, 0)——这会让边框完全不可见，但开发者误以为“语法错了”，其实只是alpha=0导致视觉上消失。
它不是清除当前元素自己的浮动（float），而是告诉浏览器：“我这个元素，**不允许被前面浮动元素的盒模型影响位置**”。换句话说，clear: both 的作用对象是「它前面的浮动兄弟元素」，不是自己，也不是后面的元素。
因为默认的 box-shadow 动画只在 offset-x 和 offset-y 上线性变化，人眼对深度感知依赖的是阴影大小、模糊度和透明度的协同变化——单靠位移，只是“滑动”，不是“靠近/远离”。
能，而且不需要任何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，底层是完整圆，上层是旋转的扇形遮罩（或反向剪裁）。