程序员没有伙伴怎么办？——新来的，可是没有妹妹怎么办？--哈哈哈哈母猴子，那么如何用stylus画出一个天真无邪的小球呢？最终效果（我一直有错觉这就是旺仔？？？）在html上引入wanzi.css命令行切换到项目目录，启动live-server实时刷新-->live-server启动stylus，监听wanzi.styl--->stylus-wwanzi.styl构建小球的整体结构首先分析一下小球的结构，小球比较长：1脸，头发，脖子，身体，身上的衣服，腰上的皮带，两只手，两条腿，红色的裙子，脚，还有红鞋，所以整体结构就是脸的结构。首先设置基本样式base-color=#152131bodyfont-size20pxbody,divmargin0padding0background#ffef5e.borderborder1pxsolidbase-color.mainpositionrelativewidth1000pxheight1000pxmargin50pxauto.wanzipositionabsolutetopftx10px250pxle眼睛、耳朵、眉毛、酒窝和樱桃嘴。所以可以看出它们都是嵌套的，都是stylus中的基本面样式。人脸背景#fbdac7width126pxheight113pxpositionabsoluteborder1pxsolid#000top0left20%border-radius18px40px80px80px眉毛实现原理：设置width，height决定眉毛的长度，border-radius决定眉毛的度数四舍五入，transform:rotate()确定眉毛放置的倾斜程度。眉宽37px高t3pxbackgroundbase-colorpositionabsolutetop31pxborder-radius50%&.left-browleft13pxtransform:rotate(-13deg)&.right-browright13pxtransform:rotate(13deg).-radius把四个角圆成一个圆，width和height影响眼睛的大小和形状。eyewidth13pxheight13pxborder-radius:50%background#000000positionabsolutetop45pxz-index2&.left-eyeleft30%&.right-eyeright30%耳朵实现原理：设置border-radius，宽度和高度影响耳朵的大小和形状。earwidth17pxheight26pxpositionabsolutetop30pxbackground-color#fbdac7z-index2&.left-earleft-10%border-radius:40%0069%&.right-earright-10%border-radius040%69%0Dimple实现原理：设置border-r内径、宽度和高度影响凹坑的大小和形状。blusherwidth14pxheight14pxborder-radius50%background-color#f79c99positionabsolutetop77pxz-index2&.left-blusherleft9%&.right-blusherright9%嘴部实现原理：使用圆角的border-radius圆形框，之后定义伪元素的样式，设置伪元素的背景色为脸的颜色，实现覆盖嘴框上半部分形成嘴巴形状的效果.mouthwidth30pxheight27pxborder-radius:79%border:1pxsolid#000background-color#e77072positionabsolutetop62pxleft38%z-index1&:aftercontent''/*musthavecontent属性*/width32pxheight25pxpositionabsolutetop-9pxleft-1pxbackground-color#fbdac7Zigzag头发结构实现：通过transform:skew()将box变成平行四边形，然后通过rotate()将平行四边形向下旋转到角上，然后传positionAdjust,adjusthairposition.hairwidth35pxheight45pxbackgroundbase-colorpositionabsolutez-index1转sformrotate(70deg)scale(1)skew(44deg)translate(8px)&.hair1top17pxleft27px&.hair2top8pxleft52px&.hair3top4pxleft73px&.hair4top0left90px&.hair5top4pxleft108px&.hair6top8pxleft125px&.hair7top17pxright17pxneck.neckwidth20pxheight7pxborder1pxsolid#000background-color#fbdac7positionabsolutetop113pxleft53pxclothesz-index衣领，肩带，如何制作肩带和衣领完全暴露在衣服里，不超过衣盒？实现：通过设置overflow:hidden在衣服盒子里，隐藏盒子外的元素，然后通过z-index调整显示顺序，覆盖衣领被衣领遮住的背带部分。实现：tranform:rotate()旋转到合适的位置。衣服width130pxheight130pxpositionabsoluteborder:1pxsolid#000background-color#ffffffborder-radius36%36%00overflowhiddentop121pxz-index10.collar/*collar*/width10pxheight25pxpositionabsoluteborder:1pxsolid#000background-color#ffftop-8pxz-index4&.left-collarleft35%transformrotate(-40deg)&.right-collarright35%transformrotate(40deg).straps/*肩带*/width10pxheight120pxpositionabsolutebackground-color#f7003bborder:1pxsolid#000top0z-index3&.left-strapsleft28%&.right-strapsright28%.belt/*belt*/宽度130pxheight10pxpositionabsolutebackground-color#f7003bborder:1pxsolid#000top119pxz-index3双手结构实现原理：实际上是两个不同颜色的椭圆，通过显示顺序z-index达到层叠的效果，最后只暴露Bothsides.arm-insideheight116pxwidth156pxpositionabsoluteborder:1pxsolid#000background-color#ffef5eborder-radius61%top136pxleft-13pxz-index1.arm-outsideheight139pxwidth181pxidxpositionorabsolute:absolute#000黑色round-color#fffborder-radius75%top122pxleft-25px裙子结构实现：用border-radius把裙子下摆圆，width增加裙子宽度，然后用border-width放大下摆，设置transparent为实现裙子褶皱的效果实现：先定义一条基线，然后根据基线rotate()其他的线，然后稍微移动位置，实现放置。裙子边框颜色：#e9003a透明边框-样式：纯色边框宽度：0px57px90px；左：-57px；位置：绝对顶部：251px宽度：132pxz-index：5border-radius：0050%50%.linewidth2pxheight44pxbackground-color#000000positionabsolutetop23pxleft64pxtransform-origin0&.line1transformrotate(20deg)left11%&.line2transformrotate(8deg)left30%&.line3transformrotate(0deg)&.line4transformrotate(-8deg)left68%&.line5变换rotate(-20deg)left89%thighconstruction.legwidth20pxheight60pxpositionabsoluteborder1pxsolid#000background-color#fadbc7top333pxz-index4&.left-legleft32px&.right-legleft80pxSocks结构实现：foot和sock两部分组成，sock部分下边框不显示，foot部分通过rotate()完成脚部方向的设置。袜子宽度20px高度28px位置绝对背景#ffffffborder-stylesolidborder-width1px1px0px1pxborder-color#000000top370pxz-index4&.left-sockleft32px&.right-sockleft80px.footwidth48pxheight23pxpositionabsolutebackground-color#ffffffsolder:id1000border-radius:80%top383pxtransform-origin00z-index3&.left-foottransformrotate(-24deg)top405pxleft2px&.right-foot顶部transformrotate(24deg)left86px鞋构造实现：类似foot,rotate().shoewidth67pxheight34px位置绝对背景色#a23030border-radius:80%top383pxtransform-origin00z-index2&.left-shoetransformrotate(-24deg)top409pxleft-14px&.right-shoetransformrotate(24deg)left86px综上所述，手写笔的使用大大提高了效率，非常nice！
