深入分析纯css画圆角矩形原理
2011-10-23 18:43
337 查看
深入分析纯css画圆角矩形原理
原理分析：在这里，利用的是像素点绘制圆角的方法，先看一个用像素绘制的圆角：
扩大了就是这样：
我们把它分作若干个部分来写样式，请看图示：
看过demo的朋友应该知道了我所描述的几大优势：
1. 无论是在横向还是纵向上都保持着无限的扩展性。
2. 没有hack，且不易出现浏览器兼容性问题。
3. 圆角颜色易自定义。
4. 圆角大小可自定义。
5. 圆角模式易自定义。
6. 可以存在于任意背景中。
7. html结构清晰。
接下来我们逐个分析：
1. 无论是在横向还是纵向上都保持着无限的扩展性。
试着修改box的width、content的height，就能看到效果。
2. 没有hack，且不易出现浏览器兼容性问题。
这个大家用各种浏览器试试就知道了，该演示仅在IE6/FF2/OP9下通过测试，但个人觉得多数浏览器应该没什么问题，因为用到的样式都很基础。
3. 圆角颜色易自定义。
大家试着将这段样式复制到已有样式的最后面。
程序代码
/*---定义边框颜色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---定义背景颜色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}
效果如下：
HTML代码
<!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"> <style> body { color:#000; background:#999; font-size:12px; line-height:1.5;
margin:0; } .box { width:500px; margin:30px auto; } .box .r1 { height:1px; overflow:hidden; margin:0 5px; background:#f60; } .box .r2 { height:1px; border-left:2px solid #f60; border-right:2px solid #f60; margin:0 3px; background:#ff0; overflow:hidden; } .box
.r3 { height:1px; border-left:1px solid #f60; border-right:1px solid #f60; margin:0 2px; background:#ff0; overflow:hidden; } .box .r4 { height:2px; border-left:1px solid #f60; border-right:1px solid #f60; margin:0 1px; background:#ff0; overflow:hidden; } .box
.content { background:#ff0; border-left:1px solid #f60; border-right:1px solid #f60; padding:7px 10px; zoom:1; } /*---修改边框颜色---*/ .box .r2, .box .r3, .box .r4, .box .content { border-color:#2d437b; } .box .r1 { background:#2d437b; } /*---修改背景颜色---*/ .box .r2,
.box .r3, .box .r4, .box .content { background:#f3fdff; } </style> <body> <div class="box"> <div class="top"> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> <div class="r4"></div> </div> <div class="content"> <p> 这样形成的圆角，是具备多种优势的：<br
/> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br /> 3. 圆角颜色易自定义。<br /> 4. 圆角大小可自定义。(试着将class="box"的修改为class="box2"。)<br /> 5. 圆角模式易自定义。<br /> 6. 可以存在于任意背景中。(试着修改body的background。)<br /> 7. html结构清晰。 </p> </div> <div
class="bottom"> <div class="r4"></div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> </div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
4. 圆角大小可自定义。
以同样的方式，将以下代码加入源码中，然后试着将class="box"修改为class="box2"试试。（也就是说，用户只需要告诉你他需要的是box1还是box2，你就能给他所需要的圆角。）
程序代码
/*---修改圆角大小---*/
.box2 {
width:500px;
margin:30px auto;
}
.box2 .r1 {
height:1px;
overflow:hidden;
margin:0 2px;
background:#f60;
}
.box2 .r2 {
height:1px;
overflow:hidden;
margin:0 1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
background:#ff0;
}
.box2 .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}
效果如下：
HTML代码
<!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"> <style> body { color:#000; background:#999; font-size:12px; line-height:1.5;
margin:0; } .box { width:500px; margin:30px auto; } .box .r1 { height:1px; overflow:hidden; margin:0 5px; background:#f60; } .box .r2 { height:1px; border-left:2px solid #f60; border-right:2px solid #f60; margin:0 3px; background:#ff0; overflow:hidden; } .box
.r3 { height:1px; border-left:1px solid #f60; border-right:1px solid #f60; margin:0 2px; background:#ff0; overflow:hidden; } .box .r4 { height:2px; border-left:1px solid #f60; border-right:1px solid #f60; margin:0 1px; background:#ff0; overflow:hidden; } .box
.content { background:#ff0; border-left:1px solid #f60; border-right:1px solid #f60; padding:7px 10px; zoom:1; } /*---修改边框颜色---*/ .box .r2, .box .r3, .box .r4, .box .content { border-color:#2d437b; } .box .r1 { background:#2d437b; } /*---修改背景颜色---*/ .box .r2,
.box .r3, .box .r4, .box .content { background:#f3fdff; } /*---修改圆角大小---*/ .box2 { width:500px; margin:30px auto; } .box2 .r1 { height:1px; overflow:hidden; margin:0 2px; background:#f60; } .box2 .r2 { height:1px; overflow:hidden; margin:0 1px; border-left:1px
solid #f60; border-right:1px solid #f60; background:#ff0; } .box2 .content { background:#ff0; border-left:1px solid #f60; border-right:1px solid #f60; padding:7px 10px; zoom:1; } </style> <body> <div class="box2"> <div class="top"> <div class="r1"></div> <div
class="r2"></div> <div class="r3"></div> <div class="r4"></div> </div> <div class="content"> <p> 这样形成的圆角，是具备多种优势的：<br /> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br /> 3. 圆角颜色易自定义。<br /> 4. 圆角大小可自定义。(试着将class="box"的修改为class="box2"。)<br
/> 5. 圆角模式易自定义。<br /> 6. 可以存在于任意背景中。(试着修改body的background。)<br /> 7. html结构清晰。 </p> </div> <div class="bottom"> <div class="r4"></div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> </div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
5. 圆角模式易自定义。
同样的方式，大家将以下样式添加进去试试？
程序代码
/*---修改圆角模式---*/
.box .top .r1,
.box .top .r2,
.box .top .r3,
.box .top .r4 {
margin-right:0;
border-right:1px;
}
.box .bottom .r1,
.box .bottom .r2,
.box .bottom .r3,
.box .bottom .r4 {
margin-left:0;
border-left:1px;
}
效果如下：
HTML代码
<!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"> <style> body { color:#000; background:#999; font-size:12px; line-height:1.5;
margin:0; } .box { width:500px; margin:30px auto; } .box .r1 { height:1px; overflow:hidden; margin:0 5px; background:#f60; } .box .r2 { height:1px; border-left:2px solid #f60; border-right:2px solid #f60; margin:0 3px; background:#ff0; overflow:hidden; } .box
.r3 { height:1px; border-left:1px solid #f60; border-right:1px solid #f60; margin:0 2px; background:#ff0; overflow:hidden; } .box .r4 { height:2px; border-left:1px solid #f60; border-right:1px solid #f60; margin:0 1px; background:#ff0; overflow:hidden; } .box
.content { background:#ff0; border-left:1px solid #f60; border-right:1px solid #f60; padding:7px 10px; zoom:1; } /*---修改边框颜色---*/ .box .r2, .box .r3, .box .r4, .box .content { border-color:#2d437b; } .box .r1 { background:#2d437b; } /*---修改背景颜色---*/ .box .r2,
.box .r3, .box .r4, .box .content { background:#f3fdff; } /*---修改圆角大小---*/ .box2 { width:500px; margin:30px auto; } .box2 .r1 { height:1px; overflow:hidden; margin:0 2px; background:#f60; } .box2 .r2 { height:1px; overflow:hidden; margin:0 1px; border-left:1px
solid #f60; border-right:1px solid #f60; background:#ff0; } .box2 .content { background:#ff0; border-left:1px solid #f60; border-right:1px solid #f60; padding:7px 10px; zoom:1; } /*---修改圆角模式---*/ .box .top .r1, .box .top .r2, .box .top .r3, .box .top .r4 {
margin-right:0; border-right:1px; } .box .bottom .r1, .box .bottom .r2, .box .bottom .r3, .box .bottom .r4 { margin-left:0; border-left:1px; } </style> <body> <div class="box"> <div class="top"> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div>
<div class="r4"></div> </div> <div class="content"> <p> 这样形成的圆角，是具备多种优势的：<br /> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br /> 3. 圆角颜色易自定义。<br /> 4. 圆角大小可自定义。(试着将class="box"的修改为class="box2"。)<br /> 5. 圆角模式易自定义。<br
/> 6. 可以存在于任意背景中。(试着修改body的background。)<br /> 7. html结构清晰。 </p> </div> <div class="bottom"> <div class="r4"></div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> </div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
6. 可以存在于任意背景中。
因为是模拟的像素图，所以多余的部分都是全透明的，大家试着修改一下body的background就行了。
7. html结构清晰。
这个纯属个人看法。
以上文章来自:
蓝光
纯CSS定义的圆角边框
<style type="text/css">#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#000;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;} #xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;} #xsnazzy {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #ccc; border-right:1px solid #ccc;}
.xb1 {margin:0 5px; background:#ccc;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#fff; border:0 solid #ccc; border-width:0 1px;}
</style>
<div id="xsnazzy">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2"></b>
<b class="xb3"></b>
<b class="xb4"></b>
</b>
<div class="xboxcontent">
<h1>CSS论坛欢迎您！</h1>
<p> CSSBBS是一个专业的CSS标准化的交流社区，打造最权威的CSS论坛。 </p>
</div>
<b class="xbottom">
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
</b>
</div>
提示：复制以上代码用记事本另存为HTML文件可预览效果，可以修改部分代码后再运行！
CSS无图片无锯齿完美圆角边框
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
<title>CSS无图片无锯齿完美圆角边框</title>
<style type="text/css">
body{background-color:#000000;}
/* [display:block] 块状显示，在元素后面添加换行符，也就是说其他元素不能在其后面并列显示；在这里是圆角正常显示的关键之一 */
.spiffy{display:block}
.spiffy *{display:block; height:1px; overflow:hidden; font-
size:.01em; background:#FF0303;}
.spiffy1{margin-left:3px; margin-right:3px; padding-left:1px;
padding-right:1px; border-left:1px solid #6d0101; border-
right:1px solid #6d0101; background:#bf0202;}
.spiffy2{margin-left:1px; margin-right:1px; padding-right:1px;
padding-left:1px; border-left:1px solid #190000; border-
right:1px solid #190000; background:#ce0202;}
.spiffy3{margin-left:1px; margin-right:1px; border-left:1px
solid #ce0202; border-right:1px solid #ce0202;}
.spiffy4{border-left:1px solid #6d0101; border-right:1px solid
#6d0101;}
.spiffy5{border-left:1px solid #bf0202; border-right:1px solid
#bf0202;}
.spiffyfg{background:#FF0303;}
</style>
</head>
<body>
<div>
<!-- 上面的两圆角开始 -->
<b class="spiffy">
<b class="spiffy1"><b><!-- 用主体颜色盖住外层[b]的底色 --></b></b>
<b class="spiffy2"><b><!-- 用主体颜色盖住外层[b]的底色 --></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b>
<!-- 上面的两圆角结束 -->
<div class="spiffyfg">
<!-- content goes here -->
CSS无图片无锯齿完美圆角边框
<br>
<br>
<br>
<br>
</div>
<!-- 下面的两圆角开始 -->
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b><!-- 用主体颜色盖住外层[b]的底色 --></b></b>
<b class="spiffy1"><b><!-- 用主体颜色盖住外层[b]的底色 --></b></b>
</b>
<!-- 下面的两圆角结束 -->
</div>
</body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入分析纯css画圆角矩形原理
- 用div+css制作圆角矩形的原理
- Cocos2d-x中图字原理之深入分析
- 交换机开发（三）—— 深入分析三层网络交换机的原理和设计
- Spring3.2.6中事件驱动模型实现原理深入源码分析
- Java 并发编程深入学习——CopyOnWrite容器使用和原理分析
- Android LayoutInflater原理分析，带你一步步深入了解View(一)
- 深入分析HashMap原理（存储 碰撞检测 取值 扩容 hashCode equals等）
- Android LayoutInflater原理分析，深入理解View(一)
- Android LayoutInflater原理分析，带你一步步深入了解View(一)
- 深入理解mybatis原理(七) MyBatis的架构设计以及实例分析
- 在firefox中用CSS实现圆角矩形
- Java：深入分析volatile的实现原理
- 深入分析JavaWeb 41 -- 邮件的发送与接收原理
- 聊聊并发（一）深入分析Volatile的实现原理
- 聊聊并发（一）——深入分析Volatile的实现原理
- Android 进阶学习：Android LayoutInflater原理分析，带你一步步深入了解View(一)
- Oracle - PGA自动管理原理深入分析及性能调整(4)
- CSS圆角实现原理（个人见解）
- 深入分析AIDL原理