“这种小羊最好骗回家了~”——如果你把这行字发给前端群里刚学 CSS 的朋友，大概率会收到一个问号。但换成“用 CSS 画一只 Q 版小羊”，很多写过两三个月页面的同学会立刻反应过来：这就是那个适合新手快速获得成就感的练习小项目。我见过不少人在第一周就急着仿一个完整官网头部，结果卡在浮动和定位里，最后连基础的图形都画不出来。问题不在于天赋，而在于太多人一上来就挑战“复杂系统”，忽略了“用几个盒子拼出一个有反馈感的东西”这件事。
这句话里最有意思的是“骗回家”三个字。技术学习里，真正能让人坚持到下一阶段的，从来不是“这个很重要所以你必须要学”，而是“我居然做到了”。一只由纯 CSS 构成的小羊，恰好能给你这种正反馈。它的图形足够简单，不至于劝退；又足够完整，能覆盖定位、圆角、层级、嵌套这些前端基础概念。这篇博客我想聊的不只是复制一份代码让页面里出现一只羊，而是拆开讲清楚：为什么这类小练习适合新手，动手前需要准备什么，具体怎么一步步画出来，卡住时该按什么顺序排查，以及做完之后怎么把它升级成更像样的前端能力。
我更想强调一个判断：这种小羊项目的最大价值，不是让你记住几个选择器，而是帮你建立“先拆图、再布局、最后调细节”的前端落地思路。你以后写导航栏、写卡片、写后台管理界面，用的都是同一套思考方式。
1. 为什么我建议新手先做一只小羊，而不是直接仿一个官网
1.1 反馈感决定你能走多远
很多新手学 CSS 时最典型的状态是“看懂了，但写不出来”。看教程时每个属性都认识，一关掉视频就不知道从哪下手。这种状态持续两周，人就会开始怀疑自己是不是不适合写代码。
真正的问题往往不是理解力，而是没找到合适的练习颗粒度。仿官网看上去很励志，实际上对新手极不友好。一个官网首页可能包含导航栏、轮播图、卡片、页脚、响应式布局，失败以后你根本不知道是哪个环节出了问题。到底是浮动没清？还是父容器高度塌了？还是图片路径错了？归因成本太高，很容易放弃。
小羊项目完全不同。它只有一块身体、一张脸、两只耳朵、两只眼睛、两团腮红，所有零件加在一起不超过十个小盒子。完成它只需要十几分钟，你能直接看到一只羊出现在浏览器里。这个“我做成了”的感觉，比任何知识本身都更能推动学习。
1.2 别小看这只羊，它覆盖了前端最核心的底层布局问题
有人说“画一只羊是不是太简单了，没什么含金量”。如果你只是复制粘贴一个现成代码，那确实没什么收获。但如果你从零开始拆解、布局、定位，你已经在不知不觉中接触了这些内容：
- 盒模型：羊的每一个部位本质上都是一个盒子，有宽、高、背景色、圆角。
- 嵌套结构：脸是身体的子元素，耳朵又是脸旁边的兄弟元素。
- 父子定位：想让耳朵、眼睛相对于脸摆放，必须理解 position 的参照关系。
- 圆角魔法：为什么 border-radius 用百分比和用 px 会产生完全不同的视觉效果。
- 层级关系：耳朵要放在脸后面，就需要用到 z-index。
- 伪元素：给眼睛加高光时，可以用 ::before 或 ::after，不用额外增加 HTML 标签。
这些知识你背一万遍，不如画一只羊来得直观。因为画图的过程会把每个属性变成“可见的改变”，而不是一个孤立的定义。
1.3 正确打开方式：先拆图，再写代码
新手最容易犯的错是拿到目标就写代码。但真正的前端布局工作，永远是从“拆”开始的。
拿到一只小羊，先观察：它由几块主要形状组成？大概是什么颜色？哪些部分在下方，哪些在上方？哪些要重叠？在心里画一个简单的层级树。比如：
- 身体是最外层的大盒子。
- 脸部是身体里的一个小盒子。
- 耳朵应该贴在脸的外侧。
- 眼睛、腮红、鼻子都在脸上层。
然后从外到内，从大块到细节。先搭出身体的轮廓，再放脸，最后调整眼睛和鼻子。这个“先拆图、再布局、最后调细节”的流程，是通用能力。以后做页面时，你的第一个动作不是写 div，而是看设计稿、划区域、定结构。
2. 动手前，先确认三件事
2.1 环境不需要复杂
很多新手以为写 CSS 需要装一堆工具，其实这个项目只需要两样东西：
- 一个现代浏览器，Chrome 或 Edge 都可以。
- 一个文本编辑器，VS Code 最常用，其他编辑器也完全没问题。
不需要框架，不需要打包工具，不需要拉取远程仓库。本地建一个文件夹，在里面新建两个文件：index.html 和 style.css。然后把 HTML 文件拖到浏览器里，或者在 VS Code 里装一个 Live Server 插件，右键打开。整个过程不到两分钟。
文件结构大致是：
sheep-demo/ ├── index.html └── style.css2.2 前置知识清单
虽然我说“新手也能做”，但前提是你至少具备这些基础：
- 知道 HTML 标签是什么，能写出一个 div。
- 明白 class 属性的作用，知道 CSS 里
.类名代表什么。 - 理解 CSS 的基本语法：
属性: 值;。 - 会打开浏览器开发者工具，能查看元素和样式。
只要满足这四点，就可以开始。如果你连 div 是什么都不知道，建议先花半小时翻一翻 HTML 基础，再回来做这个项目。
2.3 明确边界：先不做交互
这个项目在第一个版本只追求静态图形准确。不要一上来就考虑响应式、动画、JavaScript 点击事件。因为你现在的核心目标是在有限范围内建立信心。
等你能独立画出一只静态小羊后，再考虑加动画，加交互，甚至用 CSS 变量做一身不同颜色的羊。把边界先划清楚，能减少很多混乱，也能让你更清楚地看到“哪些能力是先用到的，哪些能力还没用到”。
3. 画出这只小羊：从 HTML 骨架到 CSS 细节
3.1 先搭 HTML，把每一块“零件”写清楚
不管你要画的是羊还是猫，第一步都是先写出“有哪些零件”。我做这个小项目时，习惯把每个部位都写成独立的 div，并且用有意义的 class 命名。这样后续调整样式时，每一块的作用都一目了然。
一个最小可用的 HTML 结构大概是这样的：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 小羊</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="sheep"> <div class="ear left"></div> <div class="ear right"></div> <div class="sheep-face"> <div class="eye left"></div> <div class="eye right"></div> <div class="blush left"></div> <div class="blush right"></div> <div class="nose"></div> </div> </div> </body> </html>这里有一个容易忽略的点：耳朵和脸是兄弟关系，而不是父子关系。因为我想把耳朵放在脸的外侧，让它们成为脸旁边左右各一的“挂件”。如果耳朵放在脸内部，想要让耳朵超出脸的范围，就得处理溢出隐藏或者负值定位，反而会绕弯。
class 命名用了 left、right 这种后缀，是为了让你在 CSS 里能用.ear.left和.ear.right精确控制左右两侧，不需要写重复的 HTML 结构。
3.2 身体和脸：从大块到细节
接下来写 CSS。建议先把 body 和 .sheep 这些外层结构写好，让画面先“立”起来。
* { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f7f1e5; margin: 0; } .sheep { position: relative; width: 240px; height: 280px; background: #fff8f0; border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); }body 用了 flex 让羊居中，这样打开页面时，羊会出现在浏览器正中间，观感更好。
box-sizing: border-box是很多项目里都会提前加上的基础设置。它让元素的宽高包含边框和内边距，避免你在调尺寸时被意外撑开。
.sheep的圆角写法用了斜杠分隔：border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%。斜杠左边控制水平半径，右边控制垂直半径。这样做出来的不是一个正圆，而是一个上端略微收窄的椭圆，更像是绵羊蓬松的身体轮廓。
然后是脸。脸上深棕色的椭圆。因为它是身体内部的子元素，我想让它相对于 .sheep 居中，所以需要给 .sheep 加上position: relative。这一步很关键。没有它，.sheep-face的绝对定位就会相对于更外层的 body 去计算。
.sheep-face { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 150px; height: 170px; background: #8b6a4f; border-radius: 50% 50% 45% 45%; }这里left: 50%和top: 55%是把脸的左上角放到身体宽度一半、高度一半偏下的位置。但左上角居中不等于整体居中，所以再用transform: translate(-50%, -50%)把脸向左、向上平移自身尺寸的一半。这个组合是 CSS 里让元素相对父级居中的常见方法。
3.3 把耳朵、眼睛、腮红、鼻子放到位
现在处理耳朵。耳朵要分别贴在脸的两侧，同时应该被放到脸的后面，所以需要 set 一个负 z-index。
.ear { position: absolute; top: 24px; width: 52px; height: 90px; background: #8b6a4f; border-radius: 50%; z-index: -1; } .ear.left { left: -26px; transform: rotate(-20deg); } .ear.right { right: -26px; transform: rotate(20deg); }left: -26px让左耳朵从脸和身体的交界处向左探出来。这里的数值取决于耳朵宽度和脸宽度。脸宽度是 150px，耳朵宽度是 52px，所以耳朵左边缘大约会超出脸左边缘 26px。如果你改动了脸的宽度，这里的负值也需要跟着调整。
rotate(-20deg)让耳朵稍微倾斜，看起来更自然。左耳向左旋转，右耳向右旋转。
眼睛、腮红和鼻子属于脸上的细节，它们都在.sheep-face内部，所以可以继续用绝对定位。
.eye { position: absolute; top: 64px; width: 14px; height: 18px; background: #2d1f16; border-radius: 50%; } .eye.left { left: 36px; } .eye.right { right: 36px; } .blush { position: absolute; top: 96px; width: 16px; height: 10px; background: #f5a8a0; border-radius: 50%; } .blush.left { left: 22px; } .blush.right { right: 22px; } .nose { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); width: 16px; height: 12px; background: #3a2a20; border-radius: 50%; }因为眼睛、腮红、鼻子都相对于 .sheep-face 定位，所以它们的 left、right、top 都是相对于脸这个盒子计算的。鼻子居中使用left: 50%加transform: translateX(-50%)，和刚才脸居中的原理一致。
3.4 完整代码：拿过去直接能跑
把 HTML 和 CSS 拼在一起，页面里就会出现一只 Q 版小羊。下面是完整代码示例，你可以直接保存到本地试试。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 小羊</title> <style> * { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f7f1e5; margin: 0; } .sheep { position: relative; width: 240px; height: 280px; background: #fff8f0; border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); } .sheep-face { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 150px; height: 170px; background: #8b6a4f; border-radius: 50% 50% 45% 45%; } .ear { position: absolute; top: 24px; width: 52px; height: 90px; background: #8b6a4f; border-radius: 50%; z-index: -1; } .ear.left { left: -26px; transform: rotate(-20deg); } .ear.right { right: -26px; transform: rotate(20deg); } .eye { position: absolute; top: 64px; width: 14px; height: 18px; background: #2d1f16; border-radius: 50%; } .eye.left { left: 36px; } .eye.right { right: 36px; } .blush { position: absolute; top: 96px; width: 16px; height: 10px; background: #f5a8a0; border-radius: 50%; } .blush.left { left: 22px; } .blush.right { right: 22px; } .nose { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); width: 16px; height: 12px; background: #3a2a20; border-radius: 50%; } </style> </head> <body> <div class="sheep"> <div class="ear left"></div> <div class="ear right"></div> <div class="sheep-face"> <div class="eye left"></div> <div class="eye right"></div> <div class="blush left"></div> <div class="blush right"></div> <div class="nose"></div> </div> </div> </body> </html>3.5 验证是否成功
打开浏览器后，你应该能看到：
- 页面中间有一个米白色的椭圆身体。
- 身体中间偏下位置有一张深棕色椭圆脸。
- 脸部左右两侧各有一只下垂的耳朵，耳朵在脸后面。
- 眼睛、腮红、鼻子都落在脸的正确位置上。
如果某个部位没有出现，或者位置不对，不要急着改代码。先按后面要讲的排查顺序走一遍。
4. 新手最容易错的地方，不是代码，而是“看不见的层级”
4.1 耳朵为什么跑到脸后面去了？
很多人第一次写完这个小羊时，发现耳朵不见了。其实耳朵很可能不是不见了，而是被脸盖住了。
默认情况下，HTML 里后面出现的元素会盖住前面出现的元素。我的 HTML 里，.ear写在.sheep-face前面，所以正常情况下应该是耳朵在后、脸在前。但如果你把耳朵写在脸后面，或者你想让耳朵有一部分探出来，同时又不想让脸盖住耳朵，就需要显式设置层叠关系。
给.ear加上z-index: -1，可以让它退到普通文档流的后面。但要注意，z-index对非定位元素不生效。所以耳朵必须要有position: absolute或者relative等定位方式，z-index 才会起作用。这就是为什么我在.ear里同时写上了position: absolute和z-index: -1。
4.2 position 不是乱用的，先把参照物搞清楚
新手最常见的定位问题是：明明给子元素写了position: absolute，它却跑到了页面左上角，或者跑到了浏览器窗口中心。原因通常是父元素没有设置position: relative。
absolute是相对最近的“定位祖先”来定位的。如果父级没有设置为relative、absolute或fixed，它就会一路向上找，最后找到 body。为了避免这种情况，建议给需要成为参照物的父容器主动加position: relative。
以这个小羊为例：
.sheep加了position: relative，所以.sheep-face可以相对它居中。.sheep-face加了position: absolute，所以眼睛、腮红、鼻子可以相对它定位。- 耳朵用的也是绝对定位，但它们相对
.sheep定位，而不是相对脸。因为我的 HTML 里耳朵和脸是兄弟节点，不是父子节点。
如果你修改了 HTML 结构，把耳朵放进了脸里，那眼睛和耳朵的参照物就会发生变化，定位结果也完全不同。先记住：改结构之前，先想清楚它现在的定位参照物是谁。
4.3 z-index 不是随便设 99999
很多新手处理层级时，习惯性把z-index设成很大的数，比如 9999。这种方法大多数时候能解决问题，但它掩盖了真正原因。
z-index 并不是一个全局的“谁大谁在上面”。它是在同一个层叠上下文里比较的。如果父元素之间形成不同的层叠上下文，子元素的 z-index 只能在各自的上下文里比较。在小羊项目里，只要让耳朵的 z-index 为 -1，并且确保耳朵有自己的定位，它就会跑到普通文档流后面。不需要设成 9999。
如果你发现设了 z-index 还是没用，先检查三件事：
- 元素是否有
position。 - 元素是否位于不同的层叠上下文中。
- 是不是父元素的 z-index 影响到了子元素的比较。
4.4 border-radius 不是越大越好
初学者常以为圆角越大越圆，其实不一定。border-radius同时支持 px 和百分比两种值，它们的行为有区别。
百分比是相对元素自身宽高的。如果一个元素宽 240px、高 280px，那么border-radius: 50%产生的椭圆半径是宽高各自的一半，所以会是一个正椭圆。如果你只想让元素四周变圆，但不要完全变成椭圆，可以用固定像素，例如border-radius: 20px。
小羊身体我用了斜杠写法，目的是让水平方向和垂直方向的圆角值可以分别控制，做出“身体上部略窄、下部略宽”的视觉效果。你在调自己的样式时，可以多试试这几种写法，观察页面的变化。这个过程本身就是在建立手感。
5. 如果画不出来，按这个顺序排查
5.1 先看现象，别上来就改代码
页面出错时，先问自己：是什么现象？
- 页面里的羊完全没出现？
- 羊出现了，但所有部件堆在一起？
- 耳朵不见了？
- 脸不在身体中间？
- 眼睛位置偏移？
现象不同，排查方向完全不同。不要一上来就乱改 CSS，先记录现象，再往下查。
5.2 再看 HTML，结构对不对
第二步，回到 HTML。逐一检查：
- 所有标签是否闭合？div 有没有忘记写结束标签？
- class 名称是否和 CSS 里完全一致？大小写、空格都不能错。
- 结构层级是否和预期一致？耳朵是不是放在 body 外面了？
- 引入 CSS 的 link 路径是否正确？如果你用的是外部样式表，最常见的问题是路径写错。
打开浏览器开发者工具，点开 Elements 面板，直接看当前页面上的 DOM 结构。如果元素没有出现，说明 HTML 的问题。如果元素在，但样式不对，继续往下查。
5.3 再看 CSS，有没有写错属性
如果 DOM 结构没问题，就检查 CSS：
- 样式表文件是否被正确引入？可以直接在开发者工具里看 style 标签或 link 标签是否生效。
- 选择器是否写错？
.ear.left和.ear .left是两个完全不同的意思。前者表示同时有 ear 和 left 两个 class 的元素，后者表示 ear 内部的 left 子元素。 - 属性名和属性值有没有拼写错误？
border-radius拼成border-raduis，浏览器不会报错，但样式不会生效。
建议用开发者工具的 Styles 面板逐条核对。如果一个样式被划掉了，说明它可能被其他规则覆盖，或者语法无效。
5.4 再看布局参数，位置不对往往是参照物错了
HTML 和 CSS 语法都没问题，但位置不对，大概率是布局参数的问题。
- 父容器有没有宽度和高度？绝对定位的元素需要一个参考范围，如果父级宽高为 0，子元素无论怎么定位都会乱。
position: absolute的参照物是谁？是最近的定位祖先。如果父级没有relative，它会一路跑到 body。- transform 是否影响了位置？
translate(-50%, -50%)会让元素相对自身移动，这个偏移经常被忽视。 - 负值定位是否超出了父级边界？
.ear.left { left: -26px; }会让耳朵超出父级，这本身是正常的，但如果父级设置了overflow: hidden，超出部分就会被裁掉。
每改一次定位参数，就刷新页面看一次效果。不要一次改五六处，不然你不知道哪一处真正起了作用。
5.5 最后看浏览器兼容和工具限制
到这一步，如果代码没问题，但页面表现还是不对，就要考虑浏览器和工具因素了。
现代 Chrome、Edge 对基础 CSS 的兼容性都不错，border-radius、position、z-index 这些都能直接用。但如果你用了 CSS 变量、aspect-ratio、某些新的颜色写法，就要留意浏览器版本。小羊这个项目里，我用的都是非常基础的属性，一般不涉及兼容问题。
还有一个隐蔽点：浏览器可能有缓存。改完 CSS 后，页面如果不更新，先强制刷新一次，或者打开开发者工具勾选 Disable cache。
排查顺序可以总结成一句口诀：先看现象，再查结构，然后查样式，接着查定位，最后查环境。
6. 从“画一只羊”到“写一套组件”，正确的进阶路径
6.1 先把它变成可复用组件
当你成功画出一只羊之后，不要急着做下一个图形。先回头看看现在的代码，有哪些地方可以变得更“通用”。
比如，小羊的嘴巴、颜色、身体形状都写死在 CSS 里。如果你想让页面同时出现三只不同颜色的小羊，怎么办？最粗暴的办法是复制三份 HTML，再复制三段 CSS。但这样维护起来非常痛苦，改一个耳朵形状，要改三处。
更合理的做法是：把公共样式写成一个基础类，再用 CSS 变量或者额外的 class 来控制差异。比如用 CSS 变量抽象出颜色：
.sheep { --body-color: #fff8f0; --face-color: #8b6a4f; background: var(--body-color); } .sheep--dark { --body-color: #e8ddd0; --face-color: #5b4436; }然后在 HTML 里写：
<div class="sheep"></div> <div class="sheep sheep--dark"></div>这样你就有了一只不同配色的小羊。这个“从写死到变量化”的过程，比画十只羊更有价值，因为它开始把你的代码变成可配置的组件。
6.2 给羊加一点简单动画
静态图形跑通后，可以考虑加一点让页面“活”起来的动作。不需要复杂动画，先从最简单的 hover 开始。
比如鼠标悬停时，小羊轻轻晃动：
.sheep { transition: transform 0.3s ease; } .sheep:hover { transform: rotate(-3deg) scale(1.02); }如果你想让眼睛眨动，可以尝试用关键帧动画来实现。这个过程中你会接触到@keyframes、animation、不同动画的时长曲线等概念。这些知识放到正式项目里同样适用。
但要注意，动画不要影响布局。transform和opacity这类属性不会触发重排，对性能更友好。像width、top、left这类属性做动画也可以，但性能通常较差。
6.3 尝试用 CSS 变量抽象尺寸和距离
很多新手喜欢用固定像素值写所有定位。在小项目里这没问题，但一旦要复用，你就会发现到处是魔法数字。
实际上，你可以把耳朵的宽度、脸的大小、颜色的色值都集中到 CSS 变量里。这样调整小羊的“表情”或“体型”时，不用到处找数值，改一处就可以全局生效。
当然，也不要过度设计。一个只有 100 行的练习项目，如果硬要抽取出 20 个变量，反而会增加理解成本。原则是：出现重复时才抽象，出现多个相同含义的数值时才变量化。
6.4 什么阶段可以换更难的项目
判断标准不是“我画完了一只羊”，而是：
- 你能独立拿到一个目标效果图，先拆出结构层级。
- 你能用 position 和 z-index 控制元素层级。
- 你能在出现问题时，按照结构、样式、布局、环境的顺序排查。
- 你能把画好的羊改成不同的颜色或尺寸。
满足这些之后，可以挑战下一个难度的项目：做一个用户卡片、一个导航栏、一个登录表单，或者一个简单的响应式页面。这些项目和真实业务更接近，难度又超过画一只羊，过渡起来会比较自然。
6.5 这个练习解决不了什么
我也要泼一点冷水：CSS 画小羊并不解决所有前端问题。它不会让你立刻理解 JavaScript，不会让你掌握 React 或 Vue，也不会帮你处理复杂的浏览器兼容策略。它只是前端地基里的一块砖。
这个练习的适用边界非常清晰：
- 适合零基础或入门 1 到 3 个月的开发者。
- 适合希望巩固定位、层级、盒模型的人。
- 不适合想把 CSS 图形画到极致的人，那是一个单独的领域，需要学习 SVG 或 Canvas。
- 不适合把“会画一只羊”当成“会前端”的人。
理解边界，才不会把一次小小的成功当作终点。
你真正从这个小项目里带走的，应该是“先拆图、再布局、最后调细节”的工作方式，以及“我能通过调试把它调出来”的信心。大部分时候，技术学习里最稀缺的不是教程，不是代码，而是那种“再试一次说不定就成了”的劲头。一只小羊能把你骗进门，接下来能不能走远，就看你会不会用同样的方法，去拆解更多更复杂的问题了。
