技术博客
很多人搜 sticky 和 scroll 的区别，其实是混淆了概念：sticky 是 position 属性的合法取值（如 position: sticky），而 scroll 根本不是 position 的可选值——它属于 overflow 或滚动行为相关的关键词（比如 scroll-behavior、scroll-snap-type），也出现在 JS 的 window.scroll() 等 API 中。两者不在同一语义层，不能直接对比“定位效果”。真正该比的是 sticky 和 fixed、relative 这类定位行为。
根本原因不是浏览器不支持，而是它被父容器或祖先元素“拦住了”。position: sticky 的触发依赖两个硬性条件：父容器不能有 overflow: hidden|auto|scroll，且自身不能处于 transform、perspective 或 filter 等创建新层叠上下文（BFC）的属性作用范围内。
抖动通常是因为旋转（rotate）和缩放（scale）在不同 keyframes 中独立定义，导致浏览器在插值计算时因 transform 合成顺序或数值精度问题产生视觉跳变。解决核心是：**所有 transform 变换必须统一写在同一个 transform 声明中，并全程使用同一组 keyframes 控制**。
按钮的 :hover 和 :active 样式不生效，通常不是伪类写错了，而是被其他样式覆盖、选择器优先级不足、或触发条件没满足。下面从常见原因和解决方法两方面帮你快速定位问题。
很多初学者写完 ::before 或 ::after 却看不到效果，根本原因是没设 content。这个属性是强制的——哪怕只是加个空格或点，也得显式声明。
元素用 position 定位后再加 transform 动画，容易出现位移“跳变”、起点错位、动画不连贯等问题。根本原因是 position（如 top/left）和 transform: translate() 作用于同一元素时，浏览器渲染逻辑不同，且二者会叠加影响最终布局位置，尤其在动画起始/结束帧或重排触发时表现明显。
低端设备（如旧款安卓手机、入门级平板）GPU 性能弱、主线程调度压力大，而 CSS 动画若包含过多关键帧、复杂属性或频繁重排/重绘，会直接触发强制同步布局或软件渲染，导致帧率跌破 30fps。简化 @keyframes 的本质是减少浏览器每帧需计算和合成的量，尤其避开触发重排（layout）和重绘（paint）的属性。
浏览器对 input[type=”radio”] 的原生控件有强约束，background、border-radius、width 等样式几乎无效。强行设置只会部分生效或完全忽略。真正可行的路径是：用 appearance: none 或 opacity: 0 隐藏原生元素，再用相邻兄弟选择器（+）或通用兄弟选择器（~）配合 :checked 控制自定义视觉层。
HTML5 本身不提供专门的“动画缩放”标签，缩放效果完全依赖 CSS 的 transform 属性。最直接、兼容性最好、性能最优的方式就是用 scale() 函数。
HTML5 本身不提供“动画 API”，旋转效果依赖 CSS 的 transform 和 animation 或 JavaScript 控制。最直接、兼容性最好的方式是用 CSS rotate() 函数，作用于任意块级或行内元素（需设 display: inline-block 或以上）。