HTML5+CSS3实例教程:绘制遨游浏览器Logo
http://www.itjxue.com 2015-08-05 23:40 来源:未知 点击次数:
最近开始学习前段开发的一些知识，当然少不了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的圆角。灵活运用可以绘制出更复杂的图形。