html+css制作简易版Baymax

</pre>大白的简易版图片如下，我用html+css来制作简易版的大白。<img src="https://img-blog.csdn.net/20160124185839021?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="大白图片" /><p></p><p>直接给出代码如下：</p><p></p><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Baymax made by css</title><!--<link rel="stylesheet" href="css/index.css">--><style type="text/css">@charset "utf-8";*{margin:0px;padding:0px;}img{display:block;margin:0px 10px;position:absolute;}div{border:1px solid black;background: white;}.container{position:relative;background: transparent;border:1px solid transparent;width:500px;height:425px;margin:100px 400px;}.hand_left{width:230px;height:93px;position: absolute;left:-20px;top:260px;-webkit-transform: rotate(-58deg);-moz-transform: rotate(-58deg);-ms-transform: rotate(-58deg);-o-transform: rotate(-58deg);transform: rotate(-58deg);border-radius: 190px 160px 130px 130px/90px;box-shadow:0px -5px 10px 0 #aeaeae,inset 0px 10px 10px 0 #f2f2f2;/*对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}*/-moz-box-shadow:0px -5px 10px 0 #aeaeae,inset 0px 10px 10px 0 #f2f2f2;-webkit-box-shadow:0px -5px 10px 0 #aeaeae,inset 0px 10px 10px 0 #f2f2f2 ;}.hand_right{width:230px;height:93px;position: absolute;right:-34px;top:260px;-webkit-transform: rotate(58deg);-moz-transform: rotate(58deg);-ms-transform: rotate(58deg);-o-transform: rotate(58deg);transform: rotate(58deg);border-radius: 190px 180px 130px 130px/90px;border-radius: 190px 160px 130px 130px/90px;box-shadow:0px 5px 10px 0 #aeaeae,inset 0px 80px 10px 0 #f2f2f2;/*对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}*/-moz-box-shadow:0px 5px 10px 0 #aeaeae,inset 0px 80px 10px 0 #f2f2f2;-webkit-box-shadow:0px 5px 10px 0 #aeaeae,inset 0px 80px 10px 0 #f2f2f2 ;}.body{width:320px;height:260px;position:absolute;bottom: 0px;left:95px;border-top-left-radius: 140px 150px;border-top-right-radius: 140px 150px;border-bottom-left-radius: 25px 80px;border-bottom-right-radius: 25px 80px;box-shadow:inset -80px 0px 100px 0px #f0f0f0,inset 80px 0px 100px 0px #f8f8f8;-moz-box-shadow:inset -80px 0px 100px 0px #f0f0f0,inset 80px 0px 100px 0px #f8f8f8;-webkit-box-shadow:inset -80px 0px 100px 0px #f0f0f0,inset 80px 0px 100px 0px #f8f8f8;}.head{width:245px;height:155px;position: absolute;top:15px;left:127px;border-top-left-radius: 90px 100px;border-top-right-radius: 90px 100px;border-bottom-left-radius: 50px 60px;border-bottom-right-radius: 50px 60px;box-shadow:-5px 7.5px 15px 0 #969696,inset 3px -5px 50px 0 #dddddd;-moz-box-shadow:-5px 7.5px 15px 0 #969696,inset 3px -5px 50px 0 #dddddd;-webkit-box-shadow: -5px 7.5px 15px 0 #969696,inset 3px -5px 50px 0 #dddddd;}.eyes{width:0px;height:0px;border-width: 2.5px 40px;border-color: black;position:absolute;top:72px;left:85px;}.eyes:before,.eyes:after{content:"";position:absolute;width:0px;height:0px;border:15px solid black;border-radius: 15px;}.eyes:before{right:35px;top:-15px;}.eyes:after{left:33px;top:-15px;}</style>
</head>
<body><div class="container"><div class="hand_left"></div><div class="hand_right"></div><div class="body"></div><div class="head"><div class="eyes"></div></div></div>
</body>
</html>

其中有几个难点，第一，如何制作出来并不规则的形状。

        .body{width:320px;height:260px;position:absolute;bottom: 0px;left:95px;border-top-left-radius: 140px 150px;border-top-right-radius: 140px 150px;border-bottom-left-radius: 25px 80px;border-bottom-right-radius: 25px 80px;box-shadow:inset -80px 0px 100px 0px #f0f0f0,inset 80px 0px 100px 0px #f8f8f8;-moz-box-shadow:inset -80px 0px 100px 0px #f0f0f0,inset 80px 0px 100px 0px #f8f8f8;-webkit-box-shadow:inset -80px 0px 100px 0px #f0f0f0,inset 80px 0px 100px 0px #f8f8f8;}

就身体的这一段代码而言，对形状的控制是这几句

<span style="white-space:pre">   </span>    width:320px;height:260px;<pre name="code" class="html"><span style="white-space:pre"> </span>    border-top-left-radius: 140px 150px;border-top-right-radius: 140px 150px;border-bottom-right-radius: 25px 80px;

            border-bottom-left-radius: 25px 80px;

头两句是控制长和宽，后四句是分别对四个角进行处理，使其成为圆角。重点是对border-radius这个属性的应用。就border-top-left-radius: 140px 150px;来说，它是对左上角进行处理，使得其形成的圆角是以140px为水平半径，150为垂直半径。其他三句意义与此相差不大。值得注意的是对边角处理的这四句等价于border-radius:140px 140px 25px 25px/150px 150px 80px 80px,如果想详细了解border-radius这一属性的用法可以参考http://www.w3cplus.com/css3/border-radius

第二：如何给设计出来的图像加阴影。

依旧以body这一段css代码来讲解。先看box-shadow的使用方法：对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

box-shadow:inset -80px 0px 100px 0px #f0f0f0,
inset 80px 0px 100px 0px #f8f8f8;

这句的意思对照使用方法就很明了了，值得注意的是box-shadow是可以在里面定义多个阴影的，并且一定用逗号分开。这里我就是加了一个内阴影和外阴影。并且这个属性在不同的浏览器里面的兼容性不是很好，就分别用了带有-moz和-webkit的前缀，用以使用不同内核的浏览器。

好了，下面看看代码的效果图！！

是不是很像~~

如果原文中有什么漏洞或不足，欢迎指正，敬请期待新得博文更新