纯CSS画熊猫不可行，因其缺乏路径、贝塞尔曲线等原生绘图能力，仅能靠div+border-radius等hack硬凑，导致维护性差、缩放失真、语义缺失且兼容性问题频发。
纯 CSS 画熊猫不可行——不是写法不对，是根本违背 CSS 的设计意图。CSS 是样式描述语言，不是绘图工具；它没有路径、贝塞尔曲线、矢量填充等原生绘图能力。所谓“CSS 画熊猫”，本质是用大量 div + border-radius + box-shadow + 绝对定位硬凑出近似轮廓，属于 hack 行为，维护性差、缩放失真、语义全无。
为什么 border-radius 拼熊猫会崩得很快
熊猫的黑眼圈、耳朵、鼻头都依赖多层圆角叠加，但 border-radius 只接受长度或百分比，无法定义弧度起点/终点。一旦容器宽高不等（比如用 aspect-ratio: 1 保圆，但父容器被 flex 压缩），所有 50% 或 60px 就全部错位。更麻烦的是：黑眼圈要“透出”白色底脸，必须靠 z-index 层叠+精确 offset，而不同浏览器对 transform: translateZ() 和堆叠上下文的处理不一致，Chrome 可能居中，Safari 会偏右 2px。
常见错误现象：
- 眼圈在 Firefox 下变成椭圆，在 Edge 下消失（因
overflow: hidden裁剪失效） - 鼻子用
box-shadow模拟立体感，但开启prefers-reduced-motion后阴影直接不渲染 - 响应式断点一调，
top: -45%瞬间把耳朵挂到头顶外
真正该用什么替代 CSS “手绘”
如果目标是静态、可缩放、语义清晰的熊猫图案，唯一合理方案是 SVG。它原生支持 <circle>、<ellipse>、<path>，且所有坐标/半径/描边都是数值驱动，缩放零失真，还能用 CSS 控制颜色和动画。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用 Figma 或 Illustrator 画好熊猫 → 导出为 SVG → 复制
<svg>内容进 HTML - 关键部位加
id，比如<circle id="ear-left" ...>，方便后续用 JS 动态改fill - 若需兼容 IE11，把 SVG 内联（不要
<img src="panda.svg">），否则 CSS 无法穿透控制子元素 - 避免用
viewBox="0 0 100 100"后再设width="200px"，这会导致 stroke-width 被拉伸；应统一用width/height或仅靠viewBox控制缩放
非要纯 CSS？至少守住这三条底线
如果只是练手或 demo 需求，非要用 CSS，务必规避以下陷阱：
- 不用
em或rem做熊猫部件尺寸——字体大小一变，整个熊猫就塌方；全部用px或vw - 禁用
transform: scale()整体缩放——它会放大border和box-shadow的像素级锯齿，改用width/height+aspect-ratio - 黑眼圈不能只靠两个
div盖上去：必须用伪元素::before/::after实现双层叠加，否则无障碍阅读器会把每个div当独立内容朗读 - 导出时别打包成 CSS 类名（如
.panda-eye），直接写内联 style——减少选择器权重干扰，也避免 BEM 命名污染全局
SVG 路径可以精确到小数点后三位，CSS 圆角拼图连整数像素都难对齐。真要上线项目，没人会拿熊猫的左耳是否偏移 0.3px 去赌浏览器兼容性。
