前言

目前行业内越来越卷，35岁退休炒粉的程序员在完成业务之余，还要给自己充电，压力不小，相信不少人都会养只修勾勾或者修毛毛给生活减减压。没有养的也不要在意，今天我们用 CSS 来从 0 到 1 给它干一只出来！

效果预览

实现思路

接下来通过绘制过程的分解来带大家一步步实现如何用 CSS 画一只修狗狗出来。

脑阔

狗子的脑袋是一个椭圆，我们在画正圆的基础上加大宽度，就可以实现一个扁扁的椭圆脑袋啦。

position: relative;
z-index: 1;
height: 68px;
width: 88px;
border-radius: 50%;
box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 12%);
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.052);

这里添加了 border 和 box-shadow 对脑袋的轮廓进行了 加深 处理，方便和同色的耳朵进行区分。

文中使用到的 box-shadow 的语法：

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

更多关于 box-shadow 的用法，详见：box-shadow - CSS（层叠样式表） | MDN (mozilla.org)

眼睛

眼睛是由两个小椭圆组成的，这里有个比较小的注意点，就是狗子的两个眼睛是有一定的旋转角度的，都是向里旋转，我们可以使用 CSS3 的 rotate 进行旋转。

transform: rotate(deg);

鼻子

鼻子也是椭圆画的，和上面一样，这里就不赘述了。只要调整大小和定位位置，看着协调就好了。

嘴巴

嘴巴原本我是想用两个圆重叠进行处理的，但是想了想有点麻烦。

后面就用半圆+border隐藏的方式处理。

半圆的画法之前的几篇都有使用，就是将 border-radius 的长度部分设置为 0 ，就是一个半圆了，然后我们给个下边框，嘴巴就出来啦。

height: 10px;
width: 42px;
border-radius: 50% / 0 0 100% 100%;
border-bottom: 2px solid #000;

耳朵

耳朵部分是一个弯曲的矩形，这部分有点触及到知识盲区了，最后是通过使用 径向渐变 调试了半天才稍微有内味儿了。

更多关于 radial-gradient 的用法，详见，详见：radial-gradient() - CSS（层叠样式表） | MDN (mozilla.org)

项圈

项圈就是一个圆角矩形，主要注意的是，项圈本身是左右边带白光的，白光部分我们使用 box-shadow 处理。

height: 6px;
width: 24px;
border-radius: 2px;
background-color: #a21616;
box-shadow: 0px -1px 7px 2px rgb(255 255 255);

身体

身体就是个半圆，相信对于认真完上文来说的你洒洒水啦。