登录QQ邮箱
CSS圆角进化论
CSS圆角发展过程
大致经历了3个阶段，包括：
- 背景图片实现圆角
- CSS2.0+标签模拟圆角
- CSS3.0圆角属性（border-radius属性)实现圆角
☛背景图片实现圆角：==使用背景图片实现圆角的方式很多，实现的方式和圆角的切图方式关系密切
实现方式有多种，主要讲解2种：
（一）宽度固定，高度自适应
实现关键点，4个块级标签构成
圆角矩形容器(box)—设置固定宽度，同圆角宽度
顶部圆角(radius-top)—使用背景图片实现顶部圆角
内容（ content ）—放置主体内容
底部圆角（ radius-bottom )—使用背景图片实现顶部圆角
（二）宽度和高度均自适应
实现关键点，5个标签构成
圆角矩形容器(box)—1.上下内边距大小至少设置为圆角高度；2.相对定位；3.放置内容
4个圆角—4个标签，1.分别设置各个圆角背景图片；2.绝对定位于box的4个角
当然，实现的方法还有很多，比如滑动门方法、浮动定位法等
优势：无需过多无意义标签、能够实现个性化圆角
劣势：增加了HTTP请求和页面字节数
1.在以IE6和IE8占主流的今天，考虑到浏览器兼容性，CSS3.0方式设置圆角在Web应用中，暂且还没有得到完全普及
2.无需多余无意义标签，能够实现个性化的圆角，将设计师的设计完美的以代码实现，使得用背景图片实现圆角仍旧是实现圆角的主流方法
☛CSS2.0+标签模拟圆角： border属性+标签模拟：border属性实现圆角颜色，标签模拟圆角弧度，圆角像素越大，所需标签越多
1.所需模拟标签数=圆角像素
2.分析各像素圆角特点，讲解实现思路，再使用代码实现QQ邮箱登录页的登录圆角
优势：纯CSS代码，易于维护，体积小
劣势：圆角像素越大，无意义标签越多数，圆角越发呆板，只能实现纯色圆角，局限性大
☛CSS3.0圆角属性实现圆角： 圆角属性+边框属性实现圆角：border属性设置边框样式（颜色、粗细、样式），border-radius属性实现圆角
注意：使用css3.0实现圆角，各浏览器存在显示差异，需通过私有前缀解决：-ms-(IE)、-moz-(FF)、-webkit-(谷歌，safari)，特别的，各浏览器对border-radius属性支持较好，不写私有前缀也能正常显示，但像线性渐变属性linear-gradient，就必须写私有前缀，否则就会出现显示差异
优势：专用CSS代码，易于维护，体积小，圆角自然圆滑，适合扁平化圆角实现
劣势：IE8及以下版本不支持CSS3.0，存在兼容性问题，对于个性化圆角实现上存在局限性
目前，CSS3.0已被广泛应用于移动APP应用，不考虑IE8及以下版本兼容问题，一些网站已经将圆角属性广应用到了Web端，案例中的腾讯登录框就使用了border-radius属性实现了圆角，但该圆角在IE8中显示不出来，而呈现为直角
实战项目案例：
效果图
登录QQ邮箱
@charset "utf-8";
/* common style */
*{margin:; padding:; font-size:12px; font-family:Verdana, Geneva, sans-serif,"宋体"; list-style:none;}
a{text-decoration:none; color:#04309b;}
a:hover{text-decoration:underline;}
.txt_align_c{text-align:center;}
.txt_align_r{text-align:right;}
.margin_r_10{margin-right:10px;}
.line-height_24{line-height:24px;}
#wrap{width:800px; margin:40px auto;}
#header,#mainbody,#footer{width:100%; overflow:hidden;}
#header h1{background:url(../images/logo.gif) no-repeat; height:43px; width:200px; float:left;}
/*背景图像实现固定宽度圆角*/
.topnav{float:right; width:595px; margin-top:5px;}
.top_radius{width:100%; overflow:hidden; background:url(../images/t_radius_595.gif) no-repeat; height:3px;}
.btm_radius{width:100%; overflow:hidden; background:url(../images/b_radius_595.gif) no-repeat; height:3px;}
.content{background:#ebf3ff; padding:5px; position:relative;}
.content p{color:#d0ccda;}
.content p a{margin:0 5px;}
/*背景图像实现宽度、高度自适应圆角*/
.l_top_radius,.r_top_radius,.l_btm_radius,.r_btm_radius{width:4px; height:3px; position:absolute;}
.l_top_radius{background:url(../images/l_top_radius.gif) no-repeat; left:; top:;}
.r_top_radius{background:url(../images/r_top_radius.gif) no-repeat; right:; top:;}
.l_btm_radius{background:url(../images/l_btm_radius.gif) no-repeat; left:; bottom:;}
.r_btm_radius{background:url(../images/r_btm_radius.gif) no-repeat; right:; bottom:;}
#mainbody{margin-top:22px;}
.left{float:left;}
/*CSS2.0+标签实现圆角--登录模块外框*/
.right{float:right; width:346px;}
.radius_border_1{margin:0 2px; height:1px; background:#acc3e3;}
.radius_border_2{margin:0 1px; height:1px; background:#edf6ff; border-left:1px solid #acc3e3; border-right:1px solid #acc3e3;}
.loginbox{background:#edf6ff; border-left:1px solid #acc3e3; border-right:1px solid #acc3e3; padding:20px;}
.loginbox h2{color:#28456f; font-size:14px;}
.loginbox ul{margin-top:10px;}
.loginbox li{margin-bottom:10px;}
/*CSS3.0圆角属性实现表单元素圆角*/
.loginbox li input{border:1px solid #9dadc6; border-radius:2px; height:32px; padding:0 5px; color:#888; width:292px;}
.loginbox li input.account{width:182px; border-right:1px solid #d5deed;
border-top-right-radius:; border-bottom-right-radius:;
background:-moz-linear-gradient( top,#ddd 0%,#eee 10%,#fff 20%);
background:-webkit-linear-gradient( top,#ddd 0%,#eee 10%,#fff 20%);
background:-ms-linear-gradient( top,#ddd 0%,#eee 10%,#fff 20%);}
.loginbox li input.mail_btn{
width:110px;
height:34px;
border-top-left-radius:;
border-bottom-left-radius:;
background:url(../images/select.gif) 90px center no-repeat #fbfbfb;
color:#504c4d;
text-align:left;
cursor:pointer;
}
#footer{margin-top:27px;}
#footer p{line-height:24px; color:#888;}
#footer .content p{color:#d0ccda;}