css 打造圆角边框
2007-01-24 02:35
405 查看
http://bbs.blueidea.com/viewthread.php?tid=1881447
圆角表格,困扰我们多年的问题,今天!
决定尝试一种最佳方法
我准备从今天开始 尝试最简单的圆角表格的做法,如果各位有什么好点子,欢迎讨论.
我大概总结了几点:
1.使用程序制作圆角表格
2.障眼法，非常笨拙的方法实现园角表格
3.图片模拟园角表格
4.flash模拟园角表格
5.字符，在转角处使用字符当作园角
6.滥竽充数，兼容性非常差，基本上没有用武之地
7.CSS3地实现方法 简介
8.Mozilla 的专有属性
9.等待你的想法
1.使用程序制作圆角表格 复杂程度:5 兼容性能:3
使用最普遍的是 VML, 但是严格的说，VML不能全属于，应为他在执行前是代码，但是执行以后，把代码转换成了图片，其最终效果其实是图片。
以下是一个例子：
<html xmlns:v>
<style>
v/:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
提示：您可以先修改部分代码再运行
还有一种方法，是使用纯JS制作的，代码忒长，特别复杂，一般用不着，
不过我还是认为设计者的创意非常有意思
关于JS园角表格制作方法:http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm#notes
2。使用障眼法 复杂程度:4 兼容性能:4
这个方法已经严重的违背了标准，并且代码复杂，在远处看类似一个园角表格，其实仅仅是使用表格堆积而成:
<center>
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
<tr height=1>
<td rowspan=4 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=2 width=1></td>
<td width=2></td>
<td bgcolor=#43B5C9></td>
<td width=2></td>
<td rowspan=2 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=4 width=1></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td colspan=3 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=2>
<td bgcolor=#43B5C9></td>
<td colspan=5 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 border=0 width=282 height=200 align=center bgcolor=#43B5C9>
<tr><td></td></tr>
</table>
提示：您可以先修改部分代码再运行
3.图片模拟园角表格 复杂程度:2 兼容程度5
现在使用最普遍的,是使用背景图片，缺点是，不可伸缩
但是，我看见了一个很巧妙的方法,他使用了2个div，很巧妙地进行了互补，并且可以自入伸缩，可能这是我见过所有方法里面最简单实用的一种。
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flexible box with custom corners and borders | Lab | 456 Berea Street
</title>
<style type="text/css" media="screen,print">
html,body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
padding:10px;
font:76%/135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
/* CSS for the box starts here */
.box {
padding:0 12px 0 0;
background:#fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 100% 0 repeat-y;
}
.bi {
padding:0 0 0 12px;
background:#fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 0 0 repeat-y;
}
.bt {
height:17px;
margin:0 -12px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 0 no-repeat;
}
.bt div {
width:18px;
height:17px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 0 no-repeat;
}
.bb {
height:17px;
margin:0 -12px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 100% no-repeat;
}
.bb div {
width:18px;
height:17px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 100% no-repeat;
}
.box h1 {
margin:0;
padding:0.3em 10px;
background:#efece6;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
.box p, .box ul {
margin:0;
padding:4px 10px;
background:#fff;
}
.box li {
margin:0 0 0 2em;
padding:0;
}
</style>
</head>
<body>
<div class="box">
<div class="bi">
<div class="bt">
<div>
</div>
</div>
<h1>Flexible box with custom corners and borders</h1>
<p>This is a demo of a flexible box with custom corners and custom borders.
The box will expand to contain any amount of content vertically, will handle
any text size, and can become very wide before the horizontal borders start
breaking up. How wide depends on the width of one of the background images.</p>
<p>Two images are used. <a href="box.gif"><code>box.gif</code></a> is a
complete box. For the sake of this demo I’ve made it 1600 pixels wide. It
is used for the corners and the horizontal borders. The other image,
<a href="borders.gif"><code>borders.gif</code></a>, contains the vertical
borders. Why use a single, large image for the corners instead of several
smaller ones? There are several reasons:</p>
<ul>
<li>Splitting the image into a bunch (six in this case – one for each
corner plus the top and bottom borders) of smaller images may actually
increase the total file size, depending on the look of the corners and
borders.</li>
<li>To minimize the number of HTTP requests sent to the server.</li>
<li>Convenience. When changing the look of the borders and corners,
replacing two files is faster than replacing eight files.</li>
</ul>
<p>Some extra markup is needed to put the corners and borders in place.
A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal,
and won’t get in the way if CSS is off, so I think I can live with it. It
is possible to get rid of some more markup by using the
4000
<code>:before</code>
and <code>:after</code> pseudo-elements, but since Internet Explorer doesn’t
support them I’ll leave the extra markup in there.</p>
<p>The main content area of this box can be filled with any elements you
like, as long as their background colour is set to white (or whatever colour
the inside of your box has), and their margins are zeroed. If the content
is transparent the left border will be doubled because the image used to
create it also contains the right border. You can avoid the need for that
by splitting the image in two, or adding an extra <code>div</code> to put
all your content in.</p>
<div class="bb">
<div>
</div>
</div>
</div>
</div>
</body>
</html>
提示：您可以先修改部分代码再运行
4.flash制作园角表格 复杂程度:3 兼容程度3
我比较青睐的方法，适合小型网页的制作，此法伸缩性和兼容性都不错，并且可以作出图片不能达到的效果，唯一的缺点就是，flash的方法是网页复杂许多。
抱歉，我实在找不着例子...希望谁找到了PM我。
5.字符充当园角表格 复杂程度:3 兼容程度4
这个方法是 lexrus(小龟)发明出来的，当我第一次见到这个方法，真地把我吓了一跳，其实它是在转角处增加了一个 转弯字符 "╭" & "╮".
抱歉。。我实在找不着这个方法的例子。。希望谁找到了PM我。
6.滥竽充数 复杂程度:1 兼容程度1
想到此方法的人 绝 + 笨
很容易看出，这个其实就是 windows fieldset，在 win2k & win2k-的操作系统看不出来此效果，
<fieldset>
content
</fieldset>
提示：您可以先修改部分代码再运行
7.CSS3的方法 复杂程度:2 兼容程度0
这可能是大家期待css3得最主要原应，现在Css3还没有退出，如果一旦推出，这估计是最好的圆角表格制作方法。
找了一篇文章，介绍了css3的，似乎mozilla也支持这个属性 http://www.webreference.com/dhtml/column70/2.html
这还有一片官方的，不如上面那个详细，但是这里不仅仅有圆角表格的做法，还有很多其他花样的做法。 http://www.w3.org/TR/2002/WD-css3-border-20021107/#border-radius
8.Mozilla的专有css属性 复杂程度:2 兼容程度1
-moz-border-radius 在google上面居然查不出来，很神秘的属性，不过据我研究，可能就是 7.CSS3的方法.
圆角表格,困扰我们多年的问题,今天!
决定尝试一种最佳方法
我准备从今天开始 尝试最简单的圆角表格的做法,如果各位有什么好点子,欢迎讨论.
我大概总结了几点:
1.使用程序制作圆角表格
2.障眼法，非常笨拙的方法实现园角表格
3.图片模拟园角表格
4.flash模拟园角表格
5.字符，在转角处使用字符当作园角
6.滥竽充数，兼容性非常差，基本上没有用武之地
7.CSS3地实现方法 简介
8.Mozilla 的专有属性
9.等待你的想法
1.使用程序制作圆角表格 复杂程度:5 兼容性能:3
使用最普遍的是 VML, 但是严格的说，VML不能全属于，应为他在执行前是代码，但是执行以后，把代码转换成了图片，其最终效果其实是图片。
以下是一个例子：
<html xmlns:v>
<style>
v/:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
提示：您可以先修改部分代码再运行
还有一种方法，是使用纯JS制作的，代码忒长，特别复杂，一般用不着，
不过我还是认为设计者的创意非常有意思
关于JS园角表格制作方法:http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm#notes
2。使用障眼法 复杂程度:4 兼容性能:4
这个方法已经严重的违背了标准，并且代码复杂，在远处看类似一个园角表格，其实仅仅是使用表格堆积而成:
<center>
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
<tr height=1>
<td rowspan=4 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=2 width=1></td>
<td width=2></td>
<td bgcolor=#43B5C9></td>
<td width=2></td>
<td rowspan=2 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=4 width=1></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td colspan=3 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=2>
<td bgcolor=#43B5C9></td>
<td colspan=5 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 border=0 width=282 height=200 align=center bgcolor=#43B5C9>
<tr><td></td></tr>
</table>
提示：您可以先修改部分代码再运行
3.图片模拟园角表格 复杂程度:2 兼容程度5
现在使用最普遍的,是使用背景图片，缺点是，不可伸缩
但是，我看见了一个很巧妙的方法,他使用了2个div，很巧妙地进行了互补，并且可以自入伸缩，可能这是我见过所有方法里面最简单实用的一种。
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flexible box with custom corners and borders | Lab | 456 Berea Street
</title>
<style type="text/css" media="screen,print">
html,body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
padding:10px;
font:76%/135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
/* CSS for the box starts here */
.box {
padding:0 12px 0 0;
background:#fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 100% 0 repeat-y;
}
.bi {
padding:0 0 0 12px;
background:#fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 0 0 repeat-y;
}
.bt {
height:17px;
margin:0 -12px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 0 no-repeat;
}
.bt div {
width:18px;
height:17px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 0 no-repeat;
}
.bb {
height:17px;
margin:0 -12px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 100% no-repeat;
}
.bb div {
width:18px;
height:17px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 100% no-repeat;
}
.box h1 {
margin:0;
padding:0.3em 10px;
background:#efece6;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
.box p, .box ul {
margin:0;
padding:4px 10px;
background:#fff;
}
.box li {
margin:0 0 0 2em;
padding:0;
}
</style>
</head>
<body>
<div class="box">
<div class="bi">
<div class="bt">
<div>
</div>
</div>
<h1>Flexible box with custom corners and borders</h1>
<p>This is a demo of a flexible box with custom corners and custom borders.
The box will expand to contain any amount of content vertically, will handle
any text size, and can become very wide before the horizontal borders start
breaking up. How wide depends on the width of one of the background images.</p>
<p>Two images are used. <a href="box.gif"><code>box.gif</code></a> is a
complete box. For the sake of this demo I’ve made it 1600 pixels wide. It
is used for the corners and the horizontal borders. The other image,
<a href="borders.gif"><code>borders.gif</code></a>, contains the vertical
borders. Why use a single, large image for the corners instead of several
smaller ones? There are several reasons:</p>
<ul>
<li>Splitting the image into a bunch (six in this case – one for each
corner plus the top and bottom borders) of smaller images may actually
increase the total file size, depending on the look of the corners and
borders.</li>
<li>To minimize the number of HTTP requests sent to the server.</li>
<li>Convenience. When changing the look of the borders and corners,
replacing two files is faster than replacing eight files.</li>
</ul>
<p>Some extra markup is needed to put the corners and borders in place.
A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal,
and won’t get in the way if CSS is off, so I think I can live with it. It
is possible to get rid of some more markup by using the
4000
<code>:before</code>
and <code>:after</code> pseudo-elements, but since Internet Explorer doesn’t
support them I’ll leave the extra markup in there.</p>
<p>The main content area of this box can be filled with any elements you
like, as long as their background colour is set to white (or whatever colour
the inside of your box has), and their margins are zeroed. If the content
is transparent the left border will be doubled because the image used to
create it also contains the right border. You can avoid the need for that
by splitting the image in two, or adding an extra <code>div</code> to put
all your content in.</p>
<div class="bb">
<div>
</div>
</div>
</div>
</div>
</body>
</html>
提示：您可以先修改部分代码再运行
4.flash制作园角表格 复杂程度:3 兼容程度3
我比较青睐的方法，适合小型网页的制作，此法伸缩性和兼容性都不错，并且可以作出图片不能达到的效果，唯一的缺点就是，flash的方法是网页复杂许多。
抱歉，我实在找不着例子...希望谁找到了PM我。
5.字符充当园角表格 复杂程度:3 兼容程度4
这个方法是 lexrus(小龟)发明出来的，当我第一次见到这个方法，真地把我吓了一跳，其实它是在转角处增加了一个 转弯字符 "╭" & "╮".
抱歉。。我实在找不着这个方法的例子。。希望谁找到了PM我。
6.滥竽充数 复杂程度:1 兼容程度1
想到此方法的人 绝 + 笨
很容易看出，这个其实就是 windows fieldset，在 win2k & win2k-的操作系统看不出来此效果，
<fieldset>
content
</fieldset>
提示：您可以先修改部分代码再运行
7.CSS3的方法 复杂程度:2 兼容程度0
这可能是大家期待css3得最主要原应，现在Css3还没有退出，如果一旦推出，这估计是最好的圆角表格制作方法。
找了一篇文章，介绍了css3的，似乎mozilla也支持这个属性 http://www.webreference.com/dhtml/column70/2.html
这还有一片官方的，不如上面那个详细，但是这里不仅仅有圆角表格的做法，还有很多其他花样的做法。 http://www.w3.org/TR/2002/WD-css3-border-20021107/#border-radius
8.Mozilla的专有css属性 复杂程度:2 兼容程度1
-moz-border-radius 在google上面居然查不出来，很神秘的属性，不过据我研究，可能就是 7.CSS3的方法.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用纯CSS打造的圆角边框
- DIV+CSS实现圆角边框
- DIV+CSS圆角边框
- 纯css无图片的边框圆角实现原理
- CSS 圆角边框详解
- DIV+CSS圆角边框
- CSS新特性:圆角边框多栏Gird布局背景设置
- CSS打造的边框折角效果
- 纯CSS圆角边框
- HTML5+CSS3-第二节（浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角）
- css圆角边框
- 纯CSS打造边框亮点移动效果
- 怎么样如何制作圆角边框div+css
- CSS圆角边框表格
- html css 设置元素圆角边框
- js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）
- DIV+CSS圆角边框
- DIV+CSS圆角边框
- 圆角边框_css控制形状