用css3写的遨游Logo

用css3写了一个遨游的logo，主要的思想就是div的层层嵌套并使用圆角效果。效果图如下：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用css3写遨游的Logo</title>
<style type="text/css">
#outside{
    width:240px;
    height:240px;
    border-radius:120px;
    background-color:#b1e4ff;
    border:2px solid #798cb6;
    -moz-border-radius:120px;
    }
#inside{
    width:230px;
    height:230px;
    border-radius:115px;
    position:relative;
    top:5px;
    left:5px;
    background-color:#3b99e3;
    -moz-border-radius:115px;
    }
#square{
    width:150px;
    height:100px;
    background-color:#fff;
    position:relative;
    top:70px;
    left:42px;
    border-radius:3px 20px 3px 3px;
    -moz-border-radius:3px 20px 3px 3px;
    }
#inside_square{
    width:35px;
    height:45px;
    background:#fff;
    position:relative;
    top:30px;
    left:33px;
    border:25px solid #3b99e3;
    }
</style>

</head>

<body>
<div id="outside">
<div id="inside">
<div id="square">
<div id="inside_square"></div>
</div>
</div>
</div>

</body>
</html>

 

posted @ 2013-03-15 20:52  Joy Ho  阅读(213)  评论(0)  编辑  收藏  举报