用css画个遨游logo

 

    css3出来了，用css3做圆角有没有掌握呢，最近看见一个经典的例子，用css写遨游的logo很有意思，下面来给大家分享下：

根据这个图可以分出四个DIV：

<div class="box_war1">
 <div class="box_war2">
     <div class="box_war3">
         <div class="box_war4">
            </div>
        </div>
    </div>
</div>

 

外边是一个大圆：

.box_war1{
  width:240px;
  height:240px;
  border-radius:120px;
  background:#b1e4ff;
  border:2px solid #789cb6;
  box-shadow:5px 5px 7px #999;
  -moz-boder-radius:120px;
 }

第二个圆：

.box_war2{
 width:230px;
 height:230px;
 border-radius:115px;
 position:relative;
 top:5px;
 left:5px;
 background:#3b99e3;
 -moz-border-radius:115px;
 }

第三快是个又个圆角的白块，这个简单：

.box_war3{
 width:150px;
 height:100px;
 background:#ffffff;
 position:relative;
 top:70px;
 left:42px;
 border-radius:3px 20px 3px 3px;
 -moz-border-radius:3px 20px 3px 3px;
 }

第四块就是个小白块了：

.box_war4{
 width:35px;
 height:45px;
 background:#ffffff;
 border:25px solid #3b99e3;
 position:relative;
 top:30px;
 left:33px;
 }

  对，这就完成了，有木有学会啊，一个简单也很有趣的例子^_^

转载于:https://www.cnblogs.com/TengFei1999/archive/2011/09/24/2189433.html