安全加圆角应只给表盘（.clock-face）设border-radius: 50%，指针层（.clock-hands）设overflow: visible、z-index: 10且不设圆角；指针用transform: rotate()配合transform-origin控制旋转轴，避免top/left偏移；动画用requestAnimationFrame递归调用，直取new Date()属性；Safari圆角异常时可用-webkit-mask-image修复。
圆角怎么加才不会切掉时钟指针
直接用 border-radius 给整个时钟容器设圆角，很容易把秒针、分针的尖端裁掉——因为指针是绝对定位在中心的，超出父容器的部分默认被裁剪。真正安全的做法是只给表盘（.clock-face）加圆角，而让指针所在的 .clock-hands 容器不设 overflow: hidden，且层级更高。
- 表盘层（背景、刻度）用
border-radius: 50%，同时确保宽高相等 - 指针层用
position: absolute+z-index: 10，父容器设overflow: visible - 别在最外层盒子上盲目加
border-radius，那会触发overflow: hidden的隐式行为
绝对定位指针时，transform 和 top/left 哪个更稳
用 top/left 配合 width/height 移动指针，容易因盒模型计算偏差导致中心偏移；而 transform: rotate() 绕自身中心转，只要指针元素的 transform-origin 设为 bottom center（秒针）或 center center（时/分针），旋转轴就天然落在表盘中心。
- 秒针推荐：设
height: 80%; width: 2px; transform-origin: bottom center;，再用transform: rotate(90deg) - 避免用
left: 50%; top: 50%再手动减半宽高去“居中”，响应式下极易错位 -
transform还有硬件加速优势，动画更顺，尤其在低端设备上
时钟动起来但卡顿？检查 requestAnimationFrame 的调用位置
常见错误是把 requestAnimationFrame 放在 setInterval 里反复注册，或者每次更新都新建 new Date() 并重算所有角度——这两者都会造成多余计算和帧丢弃。
- 只在初始化时调用一次
requestAnimationFrame(tick)，函数内部末尾再递归调用自己 - 角度计算用
new Date().getSeconds()等原生方法直取，别封装成多次new Date() - 避免在动画帧里操作 DOM 样式以外的内容，比如发请求、改 class 列表、触发布局重排
移动端圆角显示异常，尤其是 Safari
Safari 对 border-radius + transform 混用的渲染有历史 bug：当父容器有圆角、子元素又带 transform 时，可能圆角失效或出现白边。这不是代码写错，是 WebKit 的合成层处理逻辑问题。
立即学习“前端免费学习笔记（深入）”；
- 给圆角容器加
-webkit-mask-image: radial-gradient(circle, black 100%, transparent 100%)强制蒙版，比纯border-radius更可靠 - 避免对同一元素同时设
border-radius和transform: scale()或perspective - 真机测试不能省——iOS 模拟器常不复现该问题，必须用 Safari 真机调试
