纯css画笑脸的关键是border-radius配合overflow:hidden：脸和眼睛需宽高相等+50%圆角，嘴用宽大于脸、下侧大圆角的横条配合父容器隐藏溢出。
用 border-radius 控制圆弧是关键
html5 本身不画图，真正起作用的是 css3 的 border-radius。笑脸本质是三个圆形区域：脸（大圆）、眼睛（两个小圆）、嘴（带弧度的半圆或圆弧路径）。不用 SVG 或 canvas，纯 CSS 就得靠盒子 + 圆角 + 伪元素组合。
常见错误是直接给 div 设 border-radius: 50% 却忽略宽高必须相等，否则出来是椭圆不是正圆；还有人用 clip-path 但兼容性差（safari 旧版、IE 全跪）。
- 脸容器必须设
width和height相等，再加border-radius: 50% - 眼睛用
::before和::after伪元素，同样要保证宽高一致 +border-radius: 50% - 嘴不能只靠
border-bottom—— 那只是直线，得用border-radius配合overflow: hidden截出圆弧段
overflow: hidden 是嘴形的隐藏开关
纯 CSS 画“微笑”嘴最稳的方式，是做一个比脸略宽的横条，旋转 + 圆角 + 裁剪。比如建一个 .mouth 元素，设宽高、border-radius: 0 0 100% 100%，再用父容器的 overflow: hidden 把多余部分切掉 —— 这样出来的就是自然下弯的弧线。
别用 transform: rotate() 单独转线条，容易偏移、对不准中心；也别依赖 clip-path: circle()，firefox 早期版本和部分安卓 webview 不支持。
立即学习“前端免费学习笔记（深入）”；
- 嘴容器设
position: absolute，top 值调到脸下半部分（比如top: 60%） - 嘴元素本身宽 > 脸宽，
height很小（如8px），border-radius: 0 0 120% 120% - 脸容器必须有
overflow: hidden，否则圆弧会溢出
颜色与层级容易错在 z-index 和默认继承
眼睛常被盖在脸下面，是因为没设 position: relative 给脸容器，导致伪元素的 z-index 失效；嘴发虚或变色，往往是没重置 background-color，继承了父级透明或默认色。
另外，box-sizing: border-box 不写也可能让尺寸失控 —— 比如加了 border 后脸突然变大。
- 脸容器加
position: relative，眼睛伪元素加position: absolute+z-index: 2 - 嘴元素也要
position: absolute，且z-index小于眼睛（如1） - 所有元素显式声明
background-color，别依赖浏览器默认值 - 全局加
* { box-sizing: border-box }省去后续计算麻烦
移动端缩放时脸变形？检查视口和单位
在手机上笑脸被压扁，八成是用了 px 固定宽高，没适配不同 DPR；或者忘了设 viewport meta 标签，导致页面被强制缩放。
用 em 或 rem 并配合根字体大小调整，比纯 px 更稳妥；但注意伪元素里的尺寸也要同步单位，不然眼睛大小会失配。
- HTML head 里必须有
<meta name="viewport" content="width=device-width, initial-scale=1"> - 脸容器宽高建议用
rem（如10rem），并用@media在小屏下调小根字号 - 避免在伪元素里混用
px和em，保持单位统一
事情说清了就结束。最常卡住的其实是嘴那块的 border-radius 数值和 overflow: hidden 的配合 —— 差 5%，弧度就僵了；漏掉 hidden，整个嘴就露馅。