用纯CSS画相机易变形，因结构含圆角、同心圆、嵌套矩形和斜向快门线；硬调border-radius或写死px尺寸会导致缩放失真、边缘锯齿、兼容性差；须用%、em、clamp()维持比例关系，以position锚定层级，radial-gradient绘高光，linear-gradient画快门线，并仅对机身外壳添加安全动效。
用纯CSS画相机为什么总变形？
因为相机结构里有大量圆角、同心圆、嵌套矩形和斜向快门线，直接用border-radius硬调容易失真，尤其在不同屏幕缩放下。关键不是“画得像”，而是用可维护的层级关系模拟物理结构：镜头（圆形嵌套）、机身（带弧度的矩形）、快门按钮（偏移小圆）——所有元素必须用position: relative/absolute锚定，否则一改尺寸全乱。
常见错误现象：transform: scale()拉伸导致镜头边缘锯齿；box-shadow伪造景深却盖住快门线；用clip-path裁切镜头但不兼容老版Safari。
- 优先用
border-radius: 50%+aspect-ratio: 1保正圆，避免width/height单独设值 - 镜头光圈用多层
box-shadow叠加比多个div堆叠更轻量 - 快门按钮必须用
transform: translate(-50%, -50%)精确定位，不能靠left/top像素硬写
CSS相机代码里哪些值绝对不能写死？
机身宽度、镜头直径、快门大小这些看似固定的尺寸，一旦写成px就失去响应能力。真正要锁定的是比例关系：比如镜头直径始终是机身宽的60%，快门按钮直径是镜头的15%。用em或clamp()替代px，配合font-size主控缩放。
典型错误：.lens { width: 80px; height: 80px; } → 在高清屏上模糊，在小屏上溢出；正确写法是.lens { width: 60%; height: 60%; }并确保父容器有明确max-width。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有尺寸用
%、em或clamp(2rem, 4vw, 3rem) - 快门按钮的
top和left用calc(50% - 0.15em)动态计算偏移 - 镜头高光用
radial-gradient而非background-image: url()，避免资源加载失败白块
如何让CSS相机在Firefox和Safari里不丢快门线？
快门线本质是两条交叉的细长矩形，用transform: rotate()实现。但Firefox对transform-origin解析更严格，Safari对will-change有渲染bug，直接写rotate(45deg)会导致线条错位或消失。
错误写法：div.shutter-line { transform: rotate(45deg); } → Safari中线条被裁切；正确解法是用inset定位+linear-gradient画线，彻底避开transform。
- 快门线改用
background: linear-gradient(45deg, #333 1px, transparent 1px)重复铺满小容器 - 给快门区域加
overflow: hidden，防止线条超出边界 - 禁用
will-change: transform，改用backface-visibility: hidden触发硬件加速
要不要加:hover动效？加在哪层最安全？
加，但只加在机身外壳层（最外层div），其他所有子元素禁止绑定:hover。因为镜头、快门、取景器各自悬停会触发重排，且多层z-index叠加后鼠标事件捕获顺序不可控。
性能影响：在低端安卓机上，对.lens加transition: all 0.3s会导致60fps掉到24fps；而只对机身加filter: brightness(1.1)几乎无开销。
- 动效只作用于
.camera-body，用filter或box-shadow微调明暗 - 禁用
transition在width/height上，改用scale但限制最大缩放为1.05 - 加
@media (prefers-reduced-motion: reduce)关闭所有过渡动画
最易忽略的点：相机底部三脚架接口那个小矩形，很多人用border-bottom模拟，结果在Retina屏上变虚线。必须用独立div + height: 0.5em + background实色填充。
