HTML纯CSS绘制笑脸表情效果详解

眼睛用两个小正方形子元素，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 的数值当成可推导的变量来对待。

今天关于《HTML纯CSS绘制笑脸表情效果详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！