css3实例教程之css3写出遨游的logo
实现方法:
-
先画一个外框 width: 240px; height: 240px;border-radius: 120px;
填充背景色background:#b1e4ff;
描边border:2px solid #789cb6;
加阴影box-shadow: 5px 5px 7px #999;
给该死的firefox3私有属性-moz-border-radius: 120px; -
再画一个小圈,width: 230px; height: 230px;border-radius: 115px;
定位,position: relative;top:5px;left:5px;
填充背景色background:#3b99e3;
给该死的firefox3私有属性-moz-border-radius: 115px; -
扔一个大白方块进去width: 150px; height: 100px;background:#ffffff;
定位position: relative;top:70px;left:42px;
右上大圆角20像素,其他小圆角border-radius: 3px 20px 3px 3px;
给该死的firefox3私有属性-moz-border-radius: 3px 20px 3px 3px; -
再扔一个白方块进去width: 35px; height: 45px;background:#ffffff;
定位position: relative;top:30px;left:33px;
粗一点的蓝色描边border:25px solid #3b99e3;
最终效果图如下:
<!DOCTYPE html> <html> <head> <title>Maxthon logo in CSS</title> <style> body{margin:0;background:#fff;font-family:"Lucida Grande",Verdana,Arial,sans-serif; font-size:75%;color:#333;text-shadow:0 1px 0 rgba(255,255,255,0.8);} #content{background:#e5e5e5;padding-top:2em;} /** Maxthon ** ******************/ #maxthon-logo { width: 250px; height: 280px; position: relative; margin: 0 auto; } #maxthon-logo div { position: absolute;} #maxthon-logo .border{ width: 240px; height: 240px; background:#b1e4ff; border:2px solid #789cb6; border-radius: 120px; -moz-border-radius: 120px; } #maxthon-logo .border{opacity:0.80;} #maxthon-logo .border:hover{opacity:1;box-shadow:0 0 15px #fff; -webkit-box-shadow:0 0 15px #fff;-moz-box-shadow:0 0 15px #fff;} #maxthon-logo .circle{ width: 230px; height: 230px; top:5px; left:5px; border-radius: 115px; -moz-border-radius: 115px; background:#3b99e3; } #maxthon-logo .m{ width: 150px; height: 100px; top:70px; left:42px; background:#ffffff; border-radius: 3px 20px 3px 3px; -moz-border-radius: 3px 20px 3px 3px; } #maxthon-logo .fix-m{ width: 35px; height: 45px; top:30px; left:33px; background:#ffffff; border:25px solid #3b99e3; border-bottom:none; } </style> </head> <body> <div id="content"> <div id="maxthon-logo"> <div class="border"> <div class="circle"> <div class="m"> <div class="fix-m"></div> </div> </div> </div> </div> </div> </body> </html>