纯CSS画企鹅可行但有局限：用border-radius控制轮廓、box-shadow叠加细节、::before/::after补充部件；适合教学或轻量装饰，不适用于精准比例、缩放不变形或复杂动画场景。
纯 CSS 画企鹅完全可行，但别指望它能当 SVG 用——它本质是利用 border-radius、box-shadow 和多层 ::before/::after 拼凑出近似轮廓，适合教学演示或轻量装饰，不适合需要精准比例、缩放不变形或动画复杂的场景。
用 border-radius 控制身体和头部的“圆润度”
企鹅主体靠一个矩形元素 + 极端圆角实现：头部是高宽相等的正方形加 50% 圆角，身体用长方形加不对称圆角（比如 top-left 和 top-right 设为 60%，bottom-left 和 bottom-right 设为 20%），模拟上宽下窄的轮廓。直接写 border-radius: 50% 会变成正圆，必须配合宽高比控制。
-
width: 120px; height: 160px;+border-radius: 60% 60% 20% 20%;是常见身体组合 - 头部单独用
width: 80px; height: 80px; border-radius: 50%; - 圆角值超过
50%在某些旧版 Safari 里可能渲染异常，建议不超过70%
用 box-shadow 叠加眼睛、喙和脚，避免额外 DOM
每个小部件都靠一层 box-shadow 实现：比如左眼是 box-shadow: 20px -10px 0 2px #000;，右眼再加一个偏移。喙用斜向阴影（15px 5px 0 1px #f90;）+ 旋转伪元素微调角度；脚部则用两个水平阴影模拟分趾。好处是不增加 HTML 节点，坏处是阴影无法单独响应 hover 或设置透明度过渡。
- 多个
box-shadow用逗号分隔，顺序决定图层上下关系（前面的在下层） - 阴影模糊值（第三个参数）设为
0才能保持边缘锐利 - Chrome DevTools 的 “Computed” 面板里能看到所有生效的
box-shadow值，方便调试偏移量
用 ::before 和 ::after 补充翅膀和腮红，注意 content: "" 必须存在
翅膀不能只靠阴影——它需要一定面积和旋转角度，所以通常用 ::before 创建一个绝对定位的矩形，transform: rotate(-15deg) 模拟下垂感；腮红同理，用 ::after 加两个粉色椭圆。关键点是：没有 content: ""，伪元素根本不会渲染，哪怕写了 display: block 也没用。
立即学习“前端免费学习笔记（深入）”；
- 伪元素默认是 inline，必须显式设
display: block或inline-block - 旋转中心默认是左上角，加
transform-origin: center才能绕自身中心转 - 如果翅膀看起来太“飘”，检查父容器是否漏了
position: relative
真正难的不是画出来，而是让不同屏幕尺寸下各部件比例不崩——px 值写死就废了，改用 em 或 clamp() 控制基础尺寸，再用 scale() 微调局部变形。另外，CSS 画图一旦嵌套超过三层伪元素，维护成本会陡增，这时候该切 SVG 了。
