锐拜：CSS实现圆角矩形之函数版
很
多时候，看到很多网友，问了相同的很多问题：怎样用纯 CSS 样式代码（非圆角图片）实现圆角矩形的效果？
其实呢，挺简单的。但是呢，也挺复杂。这样说，还挺矛盾。
好，先从简单的说。不说，还是先看吧（是否觉得锐拜我挺婆妈）。
<html>
<head>
<style type="text/css">
.box {width:220px; border:0px;}
.cb {height:80px; border:solid #3F556F; border-width:0px 1px;}
.t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4 {margin:0px; padding:0px; height:1px;
border:solid #3F556F; border-width:0px 1px; overflow:hidden;}
.t1 {margin:0px 5px; border-width:1px 0px 0px 0px; height:0px;}
.t2 {margin:0px 3px; border-width:0px 2px;}
.t3 {margin:0px 2px;}
.t4 {margin:0px 1px; height:2px;}
.b1 {margin:0px 1px; height:2px;}
.b2 {margin:0px 2px;}
.b3 {margin:0px 3px; border-width:0px 2px;}
.b4 {margin:0px 5px; border-width:0px 0px 1px 0px; height:0px;}
</style>
</head>
<body>
<div class="box">
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="t4"></div>
<div class="cb">这个盒子是存放内容的</div>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</div>
</body>
</html>
OK！把上面的代码另存为 .htm 或者 .html
，然后用浏览器打开看看，看到圆角矩形了吧？是不是挺简单！啥！没看到！！！请问阁下您用的是什么浏览器？如果用
FF（firefox）浏览器没看到圆角那是你胡扯，如果用 IE 浏览器没看到圆角那是我糊涂，忘了在 <html> 前面加上 DTD
声明。现在返回加上这句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
，再试试看，终于看到圆角了吧。通常地，在 FF 浏览器上显示很完美的网页，一放到 IE
上就会有很多问题，这之中就有些是跟文档的类型声明（DTD）有关的。从 html 4.0 到 xhtml 1.0
常用的文档声明有过渡型（Transitional）与严格型（Strict），为了编写出标准化与规范化的网站页面，以及适应将来推出的 xhtml
2.0 ，锐拜建议您应该尽量采用 xhtml 1.0 的文档声明，对于 html 4.0
，我们应该学会放弃。啊！扯远了！扯远了！不知不觉就说了一堆闲话，也许是废话，如果因此而浪费了您的宝贵时间，那可就是费话了。
屁话！
刚才说了，应该是看了，用 CSS
实现圆角是挺简单的。简单是从它实现的原理来说的，但是使用起来就太复杂了。在想要实现圆角的地方必须堆加几个 DIV
，然后再设置样式属性，如果一个页面要在多处使用圆角效果，而且还要不同的样式，那工作量可是惊人的、恐怖的、繁琐的。有没有简单的方法呢？答案肯定是有
的，但不是最简单的，锐拜能想到的只有 JavaScript 。JS
这东西可是个好东西，推崇它、讨论它、喜欢它的人从西能排到东。在以前，人们喜欢拿它来设计另人讨厌的弹窗，恶意修改网页，以至于让它有点臭名远扬了。但
随着 Ajax 技术的流行使它又成为 web 编程的明日之星，借助 JS
，程序员可以设计出交互性很强的动态页面，现在越来越多人热爱它、使用它、宣传它……
JS 的好处我就不多说了，现在说一下用 JS
实现圆角矩形的原理。其实没有一点儿技术含量，因为要在实现圆角的地方输入多个 DIV ，所以，我们就使用程序的 for
循环代替繁琐的工作量，仅此而已。再高一点的技术（其实只能算是技巧）也只是用 JS 操作 DOM
节点，这样我们就可以在需要实现圆角的地方只调用一个函数再加几个参数，方便地实现圆角的弧度，效果简直就像变魔术；最终，我们将繁数化成了小事，工作起
来那可真神速。经过胡乱鼓捣一番之后，锐拜写了这个小程序
arccorner.js（弧形角），通过它可以在网页中方便地实现圆角矩形，具体的代码锐拜就不贴出来了，需要使用或者研究的朋友可以到下面这个地址下
载。
arccorner使用方法:
在需要实现圆角效果的html元素的前面或者后面调用arccorner()函数，如
<script type="text/javascript">arccorner("top","normal");</script>
<div class="title">测试</div>
<div class="content">
测试测试测试测试测试测试测试测<br />
测试测试测试测试测试测试测试测<br />
测试测试测试测试测试测试测试测<br />
测试测试测试测试测试测试测试测<br />
</div>
<script type="text/javascript">arccorner("bottom");</script>
arccorner(pst[,dgr[,bgc[,bdc]]])提供四个参数，pst（position）指定
要实现圆角的位
置；dgr（degree）指定圆角的大小，省略此参数时使用默认值（5px），注意！如果需要使用后面的参数时，这个参数不能省略，否则程序会出错。解
决的方法是使用空值，即"" ，后面的 bgc
参数同样；bgc（background-color）指定背景色，默认值（#E5E5FF）,注意使用该参数时不应该漏掉“#”符号,后面的 bdc
也一样；bdc（border-color）指定边框色，默认值（#3E556F）。
注意！！！
应该在页头加载程序文件 arccorner.js ，比如在 <head> 标记里加入此代码
<script type="text/javascript" src="arccorner.js"></script>
如果在 </html> 后面加载的话会没有效果！
pst参数可选值：
top 上面圆角
bottom 下面圆角
tl 左上角弧化
bl 左下角弧化
tr 右上角弧化
br 右下角弧化
dgr参数可选值:
normal/中圆角(5px)
big/大圆角(8px)
small/小圆角(2px)
bgc 与 bdc 参数为十六进制的 GRB 颜色值，如#000000为黑色，#FFFFFF为白色。
锐拜我开发此程序的目的在于经验分享与技术交流！若您有任何意见或者建议请 E-mail：rybby@163.com
联系锐拜。
程序名称：Arccorner（弧形角）
目前版本：v2.0
程序编辑：Rybby
下载地址：http://rybby.blog.hexun.com/35381241_d.html
程序交流讨论地址：http://rybby.blog.hexun.com/34232885_d.html
转载需知！如需转载本文，请在标题前加上“[转载]”，并在文章开头或结尾加上本文链接地址，谢谢！
生活因分享而快乐！欢迎转载。
分享到：
相关推荐
其中，利用纯CSS实现圆角矩形是前端开发者经常遇到的需求之一，尤其在设计按钮、卡片、菜单等元素时。下面，我们将深入探讨如何通过CSS来创建一个具有圆角的矩形，并分析给出的示例代码。 ### 纯CSS实现圆角矩形的...
在现代Web开发中，使用CSS实现圆角矩形已经成为一个常见的需求，它使得元素的边角不再生硬，增加了视觉上的平滑感和美观性。尽管在某些情况下，设计师可能更倾向于使用图片来达到同样的效果，但使用CSS的优势在于其...
在CSS（层叠样式表）中，圆角矩形是一种常见的设计元素，它可以使网页界面看起来更加现代化和优雅。通过CSS3的`border-radius`属性，我们可以轻松地将原本尖锐的矩形边角变为平滑的圆形或任意半径的弧形。接下来，...
现在网页上用到圆弧的地方一般都是图片，这里介绍一种用CSS作的圆角矩形，用编程的方法在网页上生成圆弧。一开始在网上发现圆弧不是图片的时候真的惊呆了，后来就仔细研究了别人做的东西，终于弄明白了，大家只要看...
在网页设计中，CSS3（层叠样式表第三版）引入了许多新的特性和功能，其中一项就是能够方便地创建圆角矩形。标题"css3实现圆角矩形"所指的就是利用CSS3的`border-radius`属性来设计带有圆角的矩形元素，这个特性极大...
本文档介绍了两种不同的方法来实现圆角矩形：一种是简洁型CSS圆角矩形；另一种是带有3D效果的CSS圆角矩形。 #### 二、简洁型CSS圆角矩形 **1. CSS代码详解** - **通用样式定义**： - `.b1,.b2,.b3,.b4,.b1b,....
div+css无图片实现圆角矩形(兼容Firefox)
圆角矩形是SVG中的基本元素之一，它允许开发者创建具有平滑圆润边角的矩形，而不是传统矩形的直角。 SVG制作圆角矩形的代码通常涉及到`<rect>`标签，该标签用于定义一个矩形。圆角矩形可以通过设置`rx`和`ry`属性来...
在网页设计中，圆角矩形是一种常见的元素，它能够为界面增添柔和、现代感的视觉效果。HTML5引入了新的CSS3属性，使得创建圆角矩形变得简单且直观，特别适合初学者掌握。本篇文章将深入探讨如何使用HTML和CSS3来创建...
##### CSS圆角框基础知识 在网页设计中，为元素添加圆角边框是一种常见的美化手段，它可以让界面看起来更加友好和现代。早期的CSS版本（如CSS2）并不支持直接创建圆角效果，因此开发者通常会借助背景图片或者复杂的...
使用CSS3可以很简便地通过代码实现圆角矩形效果，但为了兼容老版本的浏览器，使用图片来实现圆角矩形的方法依旧具有重要的实用价值。下面，我们将详细介绍几种使用Div+CSS纯图片实现圆角矩形的方法。 首先，我们...
本文将详细介绍如何利用JS和CSS实现矩形对象的圆角效果。 首先，我们来探讨CSS中的圆角属性。CSS3引入了`border-radius`属性，允许开发者设置元素边框的圆角半径。例如，如果你想创建一个宽度和高度分别为200px的...
三、CSS圆角矩形 圆角矩形可以通过调整`border-radius`值来实现。如果想让一个矩形的上左和上右角是圆角，而下左和下右角是直角，可以这样设置： ```css .rectangle { border-top-left-radius: 10px; border-top...
在CSS3中，通过`border-radius`属性可以轻松创建圆角矩形，但在不支持CSS3的老版本浏览器中，我们需要借助JavaScript来实现。一种常见的方法是使用额外的HTML元素或者修改元素的背景图来模拟圆角效果。这里我们将...
在网页设计中，圆角矩形是一种常见的元素，它能够为界面增添柔和、现代感，同时也能提升用户体验。本文将深入探讨如何使用HTML和CSS来创建圆角矩形，以及相关的技术要点。 首先，让我们从HTML的基础开始。HTML5引入...
这个“WPF圆角矩形.zip”压缩包可能包含了一个简单的WPF应用示例，展示了如何利用C#编程和XAML来实现类似小米新Logo的圆角矩形效果。 标题中的“WPF圆角矩形”指的就是在WPF环境中，使用XAML来创建具有圆角的矩形...
在网页设计领域，CSS3（层叠样式表第三版）引入了许多新的特性和功能，极大地扩展了网页元素的样式表现力。其中，"Css3圆角边框"是其中一个非常重要的特性，它允许我们创建具有平滑圆角的矩形元素，提升了网页的视觉...
<p>div + CSS 圆角矩形 <div class="r4"></div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> ``` 这里的 `div#nifty` 是主容器，`div.rtop` 用于创建顶部的圆角，而 `div.r1`...
">简洁型 css圆角矩形 <b class="b4b d1"></b> <b class="b3b d1"></b> <b class="b2b d1"></b> <b class="b1b"></b> ``` 通过调整`.b2`, `.b3`, 和 `.b4` 的边框宽度和颜色，我们可以改变矩形的圆角大小和...
在众多圆角技术中, 固定宽度的圆角矩形应该是最容易实现的, 只需要2个图片以及一段简单的html代码. html代码如下: <div class=wrapper> 标题</h1> 内容</p></div> 图片大致如下: top.gif bottom.gif