系统的学一下CSS

之前会一点CSS,因为修改Blogger模板需要用到。今天在网上下了不少CSS手册,2.0、3.0的都有,先从2.0的开始学。还下载了一些HTML4、HTML5的手册,打算看完CSS就开始学HTML。在网上看到一个用CSS3制作的Maxthon Logo,觉得效果不错,自己也动手模仿了一个。

源代码:
#outer{
 width:240px;
 height:240px;
 margin:100px auto 0;
 -webkit-border-radius: 120px;
 -moz-border-radius: 120px;
 border-radius: 120px;
 background:#b1e4ff;
 border:2px solid #789cb6;
 box-shadow: 5px 5px 7px #999;
}

#inner{
 position: relative;
 top:5px;
 left:5px;
 width: 230px;
 height: 230px;
 -webkit-border-radius: 115px;
 -moz-border-radius: 115px;
 border-radius: 115px;
 background:#3b99e3;
}

#sqr{
 position: relative;
 top:70px;
 left:42px;
 width: 150px;
 height: 100px;
 background:#ffffff;
 -webkit-border-radius: 3px 20px 3px 3px;
 -moz-border-radius: 3px 20px 3px 3px;
 border-radius: 3px 20px 3px 3px;
 box-shadow: 0px -1px 2px #333;
}

#small-sqr{
 position: relative;
 top:30px;
 left:33px;
 width: 35px;
 height: 45px;
 background:#ffffff;
 border:25px solid #3b99e3;
}
<div id="outer">
 <div id="inner">
     <div id="sqr">
         <div id="small-sqr">
            </div>
        </div>
    </div>
</div>

评论

此博客中的热门博文

清明雨凉

简记