CSS圆角进化论

 CSS圆角发展过程

 

    大致经历了3个阶段,包括:

  1. 背景图片实现圆角
  2. CSS2.0+标签模拟圆角
  3. 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中显示不出来,而呈现为直角

 实战项目案例:

效果图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录QQ邮箱</title>
<link href="css/login.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
  <div id="header">
          <h1></h1>
          <div class="topnav">
               <div class="top_radius"></div>
               <div class="content txt_align_r">
          <
p class="margin_r_10">
            <
a href="#">English</a>|<a href="#">反馈建议</a>|<a href="#">帮助中心</a>|<a href="#">企业邮箱</a>
          </
p>
         </
div> <div class="btm_radius"></div> </div> </div> <div id="mainbody"> <div class="left"><img src="images/left_cont.gif" width="383" height="290" /></div> <div class="right"> <div class="radius_border_1"></div> <div class="radius_border_2"></div> <div class="loginbox"> <h2>登录QQ邮箱</h2> <ul> <li>
              <
input type="text" value="邮箱账号或QQ号码" class="account" />
              <
input type="button" value="@qq.com" class="mail_btn" /></li> <li>
              <
input type="text" value="QQ密码" />
            </
li> </ul> <img src="images/login_txt.gif" width="312" height="171" /></div> <div class="radius_border_2"></div> <div class="radius_border_1"></div> </div> </div> <div id="footer"> <div class="content txt_align_c"> <span class="l_top_radius"></span> <span class="r_top_radius"></span> <span class="l_btm_radius"></span> <span class="r_btm_radius"></span> <p class="line-height_24"><a href="#">关于腾讯</a>|<a href="#">服务条款</a>|<a href="#">客服中心</a>|<a href="#">联系我们</a></p> </div> <p class="txt_align_c">© 1998 - 2014 Tencent Inc. All Rights Reserved</p> </div> </div> </body> </html>
@charset "utf-8";
/* common style */
*{margin:0; padding:0; 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:0; top:0;}
.r_top_radius{background:url(../images/r_top_radius.gif) no-repeat; right:0; top:0;}
.l_btm_radius{background:url(../images/l_btm_radius.gif) no-repeat; left:0; bottom:0;}
.r_btm_radius{background:url(../images/r_btm_radius.gif) no-repeat; right:0; bottom:0;}

#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
:0; border-bottom-right-radius:0;
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
:0;
  border-bottom-left-radius
:0;
  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;}

 来源于:http://www.imooc.com/learn/118

 

posted @ 2016-08-02 22:03  想旅游咯  阅读(256)  评论(0编辑  收藏  举报