还有一个更有趣的练习CSS的方法，就是发挥你的想象力画出各种图案，比如画一只会思考的猫？SegmentFault四福[1]的吉祥物四福猫是一只个性独特、特立独行、热爱自由(>^ω^<)的麒麟猫，也是社区的首席打鱼官。也可以提前查看完整代码：CSSsifoucat(codepen.io)[2]或CSSsifoucat(runjs.work)[3]。其实还是有点复杂。不要恐慌。按结构可分为头、眼、眉、耳、鼻、口、角几个部分。让我们来看看如何实现它。CSS绘图Tips有很多~首先，head是最外面的头部形状，是一个不规则的椭圆，可以用border-radius来实现。直接手写可能有点不准确。您可以使用此圆角生成工具进行微调。https://9elements.github.io/fancy-border-radius[4]假设HTML是这样的。那么，脸的形状就可以这样实现了。猫{宽度：400px;高度：320px；边界半径：50%50%50%50%/60%60%40%40%；边框：3px实心#222224；background:#fef2dc;}效果如下：然后face上也有两个圆形图案，通过两个径向渐变绘制。如果对径向渐变不熟悉，可以参考张新旭的这篇文章：10个demo实例学习CSS3radial-gradient径向渐变[5]。cat{/**/background:radial-gradient(circleat20px14px,#fff6px,transparent7px),radial-gradient(circleat12px26px,#fff3px,transparent4px)#222224no-repeat;}效果如下：哈哈，是不是有点像小孩的头发？2.眼睛然后画眼睛，可以单独用一个label，然后用两个伪元素来画。眼睛比较简单，一个圆加一个边框，边框可以用border或者box-shadow生成，然后通过定位绝对定位。眼睛::之前，眼睛::之后{位置：绝对；内容：'';宽度：50px；高度：50px；背景：#222224；框阴影：00010px#967c51；边界半径：50%；}eye::before{左：60px；上：100px;}eye::after{右：110px;top:110px;}效果如下：现在有点傻，需要加点高光，和之前一样用径向渐变画两个白色圆圈就可以了。eye::before,eye::after{/**/background:radial-gradient(circleat20px14px,#fff6px,transparent7px),radial-gradient(circleat12px26px,#fff3px,transparent4px)#222224no-repeat;}效果如下：看，有了高光，马上就不一样了，亮堂堂的。3.眉毛然后在眼睛上画一些眉毛。左右两边的眉毛是三道白色的弧线。圆弧可以用border-radius加border画，并且只保持一个方向的border。原理是这样的。由于一个元素只能画一个这样的弧，而伪元素只能画三个这样的弧，所以这里使用了两个标签。然后借助伪元素，进行适当的旋转和调整。眉毛-l，眉毛-r{位置：绝对；宽度：60px；高度：10px；边界半径：100%；边框：2px实心#fff；border-width:2px000;}eyebrow-l{left:80px;顶部：60px；变换：旋转（30度）；}眉毛-r{右：130px；顶部：60px；变换：旋转（-35deg）；}眉毛-l::之前，眉毛-l::之后，眉毛-r::之前，眉毛-r::之后{内容：'';位置：绝对；宽度：50px；高度：10px；右：0；边界半径：100%；边框：2px实心#fff；宽度：2px000；transform-origin:rightcenter;}eyebrow-l::before{顶部：-10px;变换：旋转（20度）；}眉毛-l::之后{顶部：10像素；变换：旋转（-15度）；}眉毛-r::之前，眉毛-r::之后{左：0；右：自动；transform-origin:leftcenter;}eyebrow-r::before{顶部：-10px;(-20deg);}eyebrow-r::after{top:10px;transform:rotate(15deg);}效果如下：现在有点可爱~4.现在添加耳朵，这个比较容易，先通过border-radius生成工具调整成圆弧三角形的形状，如下：需要在HTML中添加一个标签。<猫>耳朵的轮廓可以用不同的边框画出来，如下：ear::before{position:absolute;内容：'';宽度：120px；高度：200px；左：-20px；顶部：-50px；边界半径：79%21%0%100%/100%56%44%0%；背景色：#9e5439；:10px纯色#222224;边框宽度：5px30px010px；z-index:-1;}效果如下：现在耳边只有一种颜色，没有层次感，可以通过内阴影生成。ear::before{/**/box-shadow:inset-40px-10px0#b68679,inset-110px-80px0#b06648;}这样就得到了分层的耳朵。同样的方法也适用于右耳。可以使用::after生成，代码不再重复。效果如下：有了耳朵，是不是有点像猫？5.鼻子接下来是鼻子。鼻子可视为半椭圆形和圆三角形。HTML如下，只需要一个标签。<猫>半椭圆可以通过border-radius来实现，注意上面的高光鼻子，圆角三角形可以通过将圆角矩形旋转45deg，然后水平缩放得到。圆角三角形的绘制过程如下：具体实现如下：nose{position:absolute;左：140px；顶部：140px；变换：旋转（5deg）；过滤器：阴影（02px#b68679）；宽度：46px；高度：22px；边界半径：50%50%50%50%/80%80%20%20%；背景：径向渐变（8px4pxat60%50%,rgba(255,255,255,0.5)100%,transparent0)#fcbaa1no-repeat;z-index:1;}nose::after{内容:'';位置：绝对；宽度：24px；高度：24px；边界半径：5px；背景：线性渐变（135deg，透明50%，#fcbaa10）；变换：缩放（0.8,1）旋转（45deg）；左：10px；底部：-6px；z-index:-1;}这样就得到了一个小巧玲珑的鼻子~6.嘴巴嘴巴其实就是几条弧线，和之前画眉毛的方式类似，通过加上border-radius在边框上绘制，因为弯曲度比较大，可以保持两个方向的边框，绘制过程如下：所以只需要一个标签，然后用两个伪元素绘制两条弧线口<猫>具体实现如下，注意旋转中心轴：mouth{position:absolute;左：159px；顶部：170px；宽度：2px；高度：30px；边框：3px实心#222224；边框宽度：0002px；border-radius:100%;}mouth::before{content:'';位置：绝对；左：0；底部：0；宽度：60px；高度：20px；边界半径：00020px；边框：2px实心#222224；-宽度：002px2px；变换：平移（-100%）旋转（-20deg）；transform-origin:rightbottom;}mouth::after{content:'';位置：绝对；右：3px；底部：0；宽度：80px；高度：30px；边界半径：0030px0；边框：2px实心#222224；边框宽度：02px2px0；变换：平移（100%）旋转e(25°);transform-origin:leftbottom;}嗯，一只可爱的小猫出现了。七、角最后加上四福猫独有的标志，独角兽。这部分被认为是最复杂的部分。整体形状为圆锥形，也可以借助border-radius生成工具进行调整。然后左边的高光可以用内阴影来模拟，用放射状的渐变画出螺纹形状。绘制过程如下：角下有三个小彩标（暂时不知道叫什么）
