用css3代码写出来的l遨游logo

  1. 首页
  2. 首页>动态>技术经验
  • 发布日期 : 2019-04-06 浏览次数 : 191 分享文章到:

 

 

 

其实这样的文章,早在css3刚刚新起的时候就已经有人发布过了,但是针对于我对css3的理解,个人觉得今天要给大家献上的原理和代码,更简单易懂...

废话不多说咯,直接上代码!转载请注明昆明蓝色代码工作室出品哈,本工作室承接昆明网站建设昆明做网站昆明微信平台、昆明SEO等业务。欢迎咨询哦!

 


 

先画一个外框 width: 240px; height: 240px;border-radius: 120px;
填充背景色background:#b1e4ff;
描边border:2px solid #789cb6;
加阴影box-shadow: 5px 5px 7px #999;
给该死的firefox3私有属性-moz-border-radius: 120px;

如下图所示:

 

 

1_011001_1.jpg

再画一个小圈,width: 230px; height: 230px;border-radius: 115px;
定位,position: relative;top:5px;left:5px;
填充背景色background:#3b99e3;
给该死的firefox3私有属性-moz-border-radius: 115px;

如下图所示:

1_011051_1.jpg

 

扔一个大白方块进去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;

如下图所示:

1_011133_1.jpg

 

再扔一个白方块进去width: 35px; height: 45px;background:#ffffff;
定位position: relative;top:30px;left:33px;
粗一点的蓝色描边border:25px solid #3b99e3;

如下图所示:

1_011233_1.jpg

最终效果就是这样啦,至于html方面,这个就不用多少了吧。恩恩,你懂的。IE6下显示的是方型的,如下图所示:

1_011205_1.jpg

 

欢迎大家互相学习和交流,记住我们是昆明蓝色代码工作室哈!专业承接昆明做网站昆明网站建设昆明微信平台!└(^o^)┘





Copyright © 2010-2017 lmlmlm.com(昆明蓝色代码工作室)版权所有 All Rights Services. 滇ICP备10200092号