使用CSS3代码绘制可爱的Hello Kitty猫

    <!– 左眼 –>   
    <div class="left-eye"></div>   
    <!– 右眼 –>   
    <div class="right-eye"></div>   
    <!– 鼻子 –>   
    <div class="nose"></div>   
    <!– 左胡须 –>   
    <div class="left-moustache-1"></div>   
    <div class="left-moustache-2"></div>   
    <div class="left-moustache-3"></div>   
    <!– 右胡须 –>   
    <div class="right-moustache-1"></div>   
    <div class="right-moustache-2"></div>   
    <div class="right-moustache-3"></div>   
</div>   

开始绘制

可以利用 Photoshop 的参考线精确的计算出元素的 left、top、width、height、border-width 以及四个角的水平 radius 值和垂直 radius 值，有偏差的地方再微调一下基本就可以了。

脸蛋

CSS Code复制内容到剪贴板

.hello-kitty-div .face {   
    left: 107px;   
    top: 77px;   
    width: 747px;   
    height: 566px;   
    border-top: 35px solid black;   
    border-bottom: 31px solid black;   
    border-left: 29px solid black;   
    border-right: 30px solid black;   
    border-top-left-radius: 355px 333px;   
    border-top-rightright-radius: 355px 333px;   
    border-bottom-left-radius: 370px 285px;   
    border-bottom-rightright-radius: 330px 255px;   
    background-color: white;   
    z-index: 100;   
}   

左耳

CSS Code复制内容到剪贴板