<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>
<title>www.flyso.cn--漂亮的圆角表格和边框</title>
< script type="text/javascript" src="myfile/js/cb.js"></script>
< style type="text/css" media="screen,projection">
@import 'myfile/css/flyso.css';
< /style>
< style type="text/css" media="screen,projection">
html {background:transparent}
body {background:#fff url(myfile/images/bg.png) repeat-x fixed}
#wrap {
max-width:50em;
margin:0 auto;
}
* html #wrap {width:50em}
/* Default CSS
================================================*/
/* Basic styling, used when JavaScript is unsupported */
.cbb {
margin:1em 0;
padding:0 10px;
border:1px solid #666;
background:#fff;
}
.cbb h1 {
margin:0 -10px;
padding:0.3em 10px;
background:#efece6;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
/* Normal styling */
.cb {margin:0.5em 0;}
/* Top corners and border */
.bt {
height:17px;
margin:0 0 0 18px;
background:url(myfile/images/box.png) no-repeat 100% 0;
}
.bt div {
position:relative;
left:-18px;
width:18px;
height:17px;
background:url(myfile/images/box.png) no-repeat 0 0;
font-size:0;
line-height:0;
}
/* Bottom corners and border */
.bb {
height:14px;
margin:0 0 0 12px;
background:url(myfile/images/box.png) no-repeat 100% 100%;
}
.bb div {
position:relative;
left:-12px;
width:12px;
height:14px;
background:url(myfile/images/box.png) no-repeat 0 100%;
font-size:0;
line-height:0;
}
/* Left border */
.i1 {
padding:0 0 0 12px;
background:url(myfile/images/borders.png) repeat-y 0 0;
}
/* Right border */
.i2 {
padding:0 12px 0 0;
background:url(myfile/images/borders.png) repeat-y 100% 0;
}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
display:block;
margin:0;
padding:1px 10px;
background:#fff;
}
/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}
/* Default CSS ends here */
/* Custom CSS
================================================*/
/* You can use different borders for different boxes on the same page. Just adjust the CSS. Here are a few examples, one of which uses the GIF images instead of the PNG images. Note that you can also adjust borders, heights and paddings this way. Remember to adjust the IE CSS as well. */
.one {
position:absolute;
top:0;
right:0;
}
.two {
float:left;
width:45%;
}
.two .i1,
.two .i2 { background-image:url(myfile/images/borders.gif); }
.two .bt,
.two .bt div,
.two .bb,
.two .bb div { background-image:url(myfile/images/box.gif); }
#three {
float:left;
clear:both;
width:80%;
}
#three .cb {
float:left;
width:40%;
}
.button {
float:left;
margin-top:0;
}
.button .bt {
height:8px;
margin:0 0 0 9px;
background-image:url(myfile/images/button.png);
}
.button .bt div {
left:-9px;
width:9px;
height:8px;
background-image:url(myfile/images/button.png);
}
.button .bb {
height:8px;
margin:0 0 0 8px;
background-image:url(myfile/images/button.png);
}
.button .bb div {
left:-8px;
width:8px;
height:8px;
background-image:url(myfile/images/button.png);
}
.button .i1 {
padding:0 0 0 3px;
background-image:url(myfile/images/button-borders.png);
}
.button .i2 {
padding:0 3px 0 0;
background-image:url(myfile/images/button-borders.png);
}
.button .i3 {
padding:0 0.5em;
background:#3a3d40 url(myfile/images/button.png) no-repeat -3px -8px;
font-weight:bold;
text-decoration:none;
text-align:center;
}
.button a:link,
.button a:visited,
.button a:hover {
border:none;
color:#fff;
}
/* Just a bit of styling for this demo page. Adjust as you wish. */
#absolute-wrapper {
position:relative;
height:9em;
}
.cb li {margin-left:1em;}
< /style>
< !--[if lt IE 8]>
< style type="text/css">
/* Required IE fixes
================================================*/
/* Serve gif images to IE/Win pre version 7 */
* html .i1,
* html .i2 {background-image:url(myfile/images/borders.gif);}
* html .bt,
* html .bt div,
* html .bb,
* html .bb div {background-image:url(myfile/images/box.gif);}
/* Set a height to fix up some rendering issues. */
* html .i1,
* html .i3 {height:1px;}
/* Give the absolutely positioned box a width (including IE 7)*/
.one {width:70%;}
/* Custom rules for the buttons */
/* All IE versions need a width */
.button {width:20em;}
/* IE 7 does not need these */
* html .button .i1,
* html .button .i2 {background:transparent;}
* html .button .bt,
* html .button .bt div {background-image:url(myfile/images/button.gif);}
* html .button .bb,
* html .button .bb div {background-image:url(myfile/images/button.gif);}
< /style>
< ![endif]-->
< meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
< body>
< div id="wrap">
<div>
<h1>圆角边框表格</h1>
<p>这个页面演示了圆角边框表格的几种不同用法。为了创建你自己的圆角和边框样式，你可以修改相关CSS和图片。如果你要转载该页面，请注明出处，谢谢合作！</p>
<p>用法：<br>
1。把该页面的css拷贝到您的css里<br>
2。引用相关的js文件--<br>
〈script type="text/javascript" src="myfile/js/cb.js"〉〈/script〉<br>
3。修改图片并放到可以引用的位置。IE7和FF下均能显示PNG阴影图片的效果，IE6以下只能显示圆角和边框 </p>
</div>
<div>
<h2>一个很简单的BOX，没什么特别的</h2>
<p>这是一个最基本的样式的容器。使用了简单样式，而且没有使用定位和浮动，也不包含其他容器。</p>
</div>
<ul>
<li>你也可以把一个列表放进这个容器。这是一个无序列表</li>
<li>第一个列表项目</li>
<li>第二个列表项目</li>
</ul>
<div>
<h2>这个容器包含了另一个容器</h2>
<div>
<h3>这个容器被另一个容器包含.</h3>
<p>这样通常都会有问题.</p>
</div>
<p>但是现在你可以把容器放进其他容器，这样也不会有问题.</p>
</div>
<div id="absolute-wrapper"><!-- Only used to create a new positioning context for the absolutely positioned box -->
<div id="box-id" class="cbb one">
<h2>这是一个绝对定位的容器</h2>
<p>它将会随着内容自动伸缩除了IE.</p>
</div>
</div>
<p>你也可以把这个技术应用到按钮上。这些浮动在左边而且可以自适应内容:</p>
<div>
<a href="http://www.flyso.cn" class="cbb button">这是按钮</a>
<a href="http://www.flyso.cn" class="cbb button">这个按钮更长一些</a>
</div>
<p>很不幸你需要为IE指定一个宽度如果它不能自动伸缩.</p>
<div class="cbb two">
<h2>这个容器是浮动的</h2>
<p>在IE6和以下它也能应用该样式。IE7支持PNG的ALPHA透明，当然FF也支持.</p>
</div>
<div id="three">
<h2>这个浮动的容器包含了另一个浮动容器</h2>
<div>
<h3>这个浮动容器被另一个浮动容器包含</h3>
<p>就象你看到的一样，浮动也能包含浮动.</p>
</div>
<p>使这个容器浮动的CSS是以ID选择器来使用的，它说明如果一个ID属性存在，将会使得该容器获得新的样式.</p>
</div>
<div id="labfooter">
<p><a href="http://www.flyso.cn">www.flyso.cn</a> <a href="http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/" target="_blank">转自456bereastreet</a></p>
< /div>
< /div>
< /body>
< /html>