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="data: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="data: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:; 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;}

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

CSS圆角进化论的更多相关文章

  1. DIV+CSS圆角边框

    简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...

  2. css圆角矩形及去掉空格属性

    css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...

  3. 大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. CSS圆角效果

    看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...

  5. CSS圆角样式

    CSS圆角: /*纯css,设置图片圆角*/ #top2 { margin-left:20px; padding:10px; width:600px; height:300px; border: 5p ...

  6. 兼容性很好的纯css圆角

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  7. CSS圆角框，圆角提示框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. CSS 圆角框

    转载请注明来源:https://www.cnblogs.com/hookjc/ 其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin: ...

  9. css圆角边框

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

随机推荐

  1. servlet总结：Servlet基础

    Servlet基础 1.手工编写第一个Servlet ⑴继承HttpServlet ⑵重写doGet()或者doPost()方法 ⑶在web.xml中注册Servlet 2.使用eclipse编写第一 ...

  2. 将Myeclipse项目改成Eclipse项目

    由于项目需求,需要将原来Myeclipse项目转移到Eclipse中去.搞了半天才搞出来,分享给大家,希望对大家有用. 首先导入一个从Myeclipse导出的项目 然后无法进行tomcat发布. 但是 ...

  3. C#设计模式之8：外观模式

    外观模式 外观模式和适配器模式一样,都实现了接口改变,适配器模式是让一个接口转化成另外一个接口,而外观模式是让接口变得更简单. 先来看一下需求: 外观模式没有封装子系统的类,外观只是提供一个统一的接口 ...

  4. Oracle 强制中止正在执行的SQL语句

    -- 1 查询正在执行的sql语句 select b.sid, b.username, b.serial#, a.spid, b.paddr, c.sql_text, b.machine from v ...

  5. java lang(Thread) 和 Runable接口

    public interface Runnable { public abstract void run(); } public class Thread implements Runnable { ...

  6. GlusterFS 安装配置

    1.磁盘格式化 mkfs.xfs -i size=512 /dev/vdb1 mkdir -p /data/brick1 cat > /etc/fstab <<EOF /dev/vd ...

  7. No module named 'ConfigParser'

    系统: CentOS-6.4-x86_64 Python : Python 3.4.5 和 Python 3.5.2 安装 MySQL-python ,结果出错: ImportError: No mo ...

  8. string.Format出现异常：输入字符串的格式不正确 Exception during StringFormat

    错误信息:Exception during StringFormat:输入字符串的格式不正确 “System.FormatException”类型的未经处理的异常在 mscorlib.dll 中发生 ...

  9. github上传时出现error: src refspec master does not match any解决办法22

    1 error:src refspec master does not match any这个问题,我之前也遇到过,这次又遇到了只是时间间隔比较长了,为了防止以后再遇到类似问题,还是把这个方法简单记录 ...

  10. hdu-4763(kmp+拓展kmp）

    题意:给你一个串,问你满足最大字串既是前后缀,也在字符串除去前后缀的位置中出现过: 思路:我用的是拓展kmp求的前后缀,只用kmp也能解,在字符串2/3的位置后开始遍历,如果用一个maxx保存前2/3 ...