用css3实现的简单的云朵

  今天用css3和html实现了简单的cloud，主要运用box-shadow,border-radius技术；

html代码：

<div id = "cloud"><span class='shadow'></span></div>

css代码如下：

*{ margin:0; padding:0;}
 body{ background:#ccc;}
 #cloud{ width:330px; height:120px; background:#f2f9fe; background:-webkit-linear-gradient(top,#f2f9f3 5%,#d6f0fd 100%);
 background:-moz-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
 background:-ms-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
 background:-o-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
 background:linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
 border-radius:100px;
 position:relative;
 margin:120px auto 20px;
 }
 #cloud:after,#cloud:before{content:""; position:absolute; background:#f2f9fe; z-index:-1;}
 #cloud:after{ width:100px; height:100px; top:-50px; left:50px; border-radius:100px;}
 #cloud:before{ width:180px; height:180px; top:-90px; right:50px; border-radius:200px;}
 .shadow{ width:350px; position:absolute; bottom:-10px; background:#000; z-index:-1;
  box-shadow:0 0 25px 8px rgba(0,0,0,0.4);border-radius: 50%; -webkit-border-radius:50%;
 }

预览效果如下图，不支持ie8及以下的浏览器：