纯 css 画笑脸需用 border-radius + clip-path 或伪元素分层：脸和眼睛须宽高相等+50%圆角，嘴用 clip-path: ellipse() 或 border 技巧配合 overflow:hidden 裁出弧形，全部使用 rem 或 clamp() 保证缩放无锯齿、高保真。
纯 CSS 能画出可缩放、无锯齿、语义清晰的笑脸，但必须放弃 <img> 思维，用 border-radius + clip-path 或伪元素分层控制 —— 否则会陷入“用 div 拼像素”的死循环。
用 border-radius 控制圆形脸和眼睛，不是靠 guess 数值
人脸主体用一个正方形 <div>，关键不是设 <code>50% 就完事：如果容器宽高不等，border-radius: 50% 会拉成椭圆。必须确保父容器是正方形，或直接用 aspect-ratio: 1 / 1（现代浏览器）。
眼睛用两个小正方形子元素，border-radius: 50% 才能真正变圆；注意它们的位置依赖 position: absolute 和 top/left 偏移，而非 margin —— 否则响应式时容易错位。
- 错误写法：
border-radius: 10px（固定像素 → 缩放后眼睛变小、比例崩坏） - 推荐写法：
border-radius: 50%+ 父级width/height等值 - 兼容老浏览器？用
padding-bottom: 100%配合position: relative实现正方形容器
::before 和 ::after 画嘴，别用额外 HTML 标签
嘴是弧线，最简方案是用伪元素 + border-bottom + transform: rotate()，但要注意：默认是直线，需先设 width 和 height 为 0，再用 border-bottom 构造弧形底边。
更可控的做法是用 clip-path: ellipse() 裁剪一个长矩形，露出下半段弧形 —— 这样嘴的曲率、粗细、开口角度都可通过参数调节，且不依赖 transform 变形带来的渲染模糊。
- 常见翻车：
border-bottom: 4px solid #000直接写在块上 → 出现方角，不是弧线 - 正确姿势：设
width: 0; height: 0; border-bottom: 8px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent;再transform: rotate(-20deg) - 高保真选择：
clip-path: ellipse(30% 15% at 50% 60%)（横向半径 30%，纵向 15%，中心下移至 60%）
响应式缩放时，em 和 rem 比 px 更可靠，但得设好根字号
如果整个笑脸用 px 写死尺寸，缩放时眼睛和嘴会相对脸变小，失去比例。改用 em：脸设为 font-size: 64px，内部所有尺寸（如眼睛宽 0.3em、嘴高 0.15em）自动随根字号缩放。
但注意：若父级有 font-size 继承链，em 会层层相乘。更稳的是统一用 rem，并在 :root 定义基准，再配合媒体查询动态调整 font-size。
- 别写：
width: 100px; height: 100px;→ 缩放失真 - 要写：
font-size: clamp(16px, 4vw, 64px);+ 内部全部用rem - 边缘细节：
box-sizing: border-box必须加，否则border会让实际尺寸溢出预期
真正难的不是画出来，而是让笑脸在 Retina 屏不发虚、在 Safari 下嘴弧线不跳变、在缩放到 0.5 倍时仍保持平滑 —— 这些都取决于你是否用几何逻辑替代视觉拼凑，以及有没有把每个 border-radius 和 clip-path 的数值当成可推导的变量来对待。
