深入分析纯css画圆角矩形原理
来源：互联网 发布：p2p网络终结者破解版 编辑：程序博客网 时间：2024/04/29 15:41
深入分析纯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代码[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代码[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代码[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画圆角矩形原理
- 纯CSS圆角矩形
- 纯css圆角矩形
- 纯css制作圆角矩形边框
- 纯DIV+CSS制作圆角矩形
- CSS：纯CSS绘制三角形（原理）
- div+css 画圆角矩形
- 利用css画圆角矩形
- 模拟阴影效果纯CSS圆角矩形
- 纯CSS制作圆角矩形框知识总结
- 纯css实现三角原理，兼容IE
- 纯CSS制作三角形的原理
- 深入分析AIDL原理
- 深入分析AIDL原理
- css原理分析
- 用div+css制作圆角矩形的原理
- 深入分析Java ClassLoader原理
- 【Android】深入分析AIDL原理
- spring3.0 aspectj 的配置与使用
- AutoPostBack属性值为True和False的含义 (即为和不和服务器交互)
- Qt 中文显示问题
- 特殊符号大全
- jqGrid的简单应用
- 深入分析纯css画圆角矩形原理
- Code Co-op 5.2a 延长试用期的办法
- Java学习笔记（一） Java基础以及数据类型介绍
- 利用CSVDE和DSADD实现AD帐号批量导入导出
- Linux回收站[改写rm防止误删文件无法恢复]
- 编译android sdk 遇到的问题
- 新概念英语 Lesson 24
- Linux 2.6.19.x 内核编译配置选项简介
- 智能家的Web界面
