用CSS制作的圆角层

最新推荐文章于 2024-10-10 19:30:00 发布

ianc

最新推荐文章于 2024-10-10 19:30:00 发布

阅读量2k

点赞数

分类专栏： Js/Xml/Html/Css+div 文章标签： css class html div image textbox

Js/Xml/Html/Css+div 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

终于找到一个没有使用VML制作的圆角效果的层，仔细看了一下代码，其实也很简单，用几个<b></b>作了点小小的欺骗，应该也算是技巧了吧，以下是代码：

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: HTML CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
<p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

补充：
1.使用程序制作圆角表格

使用最普遍的是 VML, 但是严格的说，VML不能全属于，应为他在执行前是代码，但是执行以后，把代码转换成了图片，其最终效果其实是图片。

以下是一个例子：

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2.图片模拟园角表格

现在使用最普遍的,是使用背景图片，缺点是，不可伸缩

但是，我看见了一个很巧妙的方法,他使用了2个div，很巧妙地进行了互补，并且可以自入伸缩，可能这是我见过所有方法里面最简单实用的一种。

HTML代码

<?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 <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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

7.CSS3的方法

这可能是大家期待css3得最主要原应，现在Css3还没有退出，如果一旦推出，这估计是最好的圆角表格制作方法。

找了一篇文章，介绍了css3的，似乎mozilla也支持这个属性
http://www.webreference.com/dhtml/column70/2.html

这还有一片官方的，不如上面那个详细，但是这里不仅仅有圆角表格的做法，还有很多其他花样的做法。
http://www.w3.org/TR/2002/WD-css3-border-20021107/#border-radius