CSS3+HTML5學習筆記一-繪製遨遊瀏覽器Logo

最近開始學習前段開發的一些知識，當然少不了Html5和Css3，作為我的第一課，我參照別人的例子，自己動手，用Css3繪製了一個遨遊的Logo。現記錄一下嘿嘿：

 1 <!DOCTYPE> 2 <html> 3 <head> 4     <meta charset="utf-8" /> 5     <style> 6         header{ 7             font-family:"MicroSoft YaHei"; 8             font-size:30px; 9             color:#990000;10         }11         12         .Circle1{13             width:240px;14             height:240px;15             -moz-border-radius:120px;16             -webkit-border-radius:120px;17             border-radius:120px;18             border:2px solid #789cb6;19             box-shadow:5px 5px 7px #999;20         }21         22         .Circle2{23             width:230px;24             height:230px;25             -moz-border-radius:115px;26             -webkit-border-radius:115px;27             border-radius:115px;28             background-color:#3b99e3;29             position:relative;30             left:5px;31             top:5px;32         }33         .rect1{34             width:150px;35             height:100px;36             -moz-border-radius:3px 20px 3px 3px;37             -webkit-border-radius:3px 20px 3px 3px;38             border-radius:3px 20px 3px 3px;39             background-color:#FFFFFF;40             position:relative;41             left:40px;42             top:65px;43         }44         45         .rect2{46             width:35px;47             height:45px;48             background-color:#FFFFFF;49             border:25px solid #3b99e3;50             position:relative;51             left:70px;52             top:-5px;53         }54     </style>55 </head>56 <body>57 <header>Lession One</header>58 <section>59     <div class="Circle1">60         <div class="Circle2">61             <div class="rect1"></div>62             <div class="rect2"></div>63         </div>64     </div>65 </section>66 </body>67 </html>

 

以上代碼運行結果如下：

　　

以上代碼參考了網上的代碼，參考的網址為：http://www.html5cn.org/forum.php?mod=viewthread&tid=2471。

總結：這個logo起始繪製起來很簡單，主要是利用了css的圓角。靈活運用可以繪製出更複雜的圖形。