系统的学一下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>
评论