把表格的四角变成弧形的效果

最新推荐文章于 2021-01-17 15:35:24 发布

w617280955

最新推荐文章于 2021-01-17 15:35:24 发布

阅读量4.2k

点赞数 1

分类专栏： html css 文章标签： class html border url 浏览器 table

html css 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

方法一利用边框长短不一

<!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>
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
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>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-272662-1'],
['_setDomainName', '.html.it'],
['_trackPageview']
);
</script>
</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>

在这里添加字体，有弧形的边框哦
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b

class="r1"></b></b>
</div>

</body>
</html>

方法二：不使用图像的圆角菜单

http://www.wangyexx.com/css/jc/726.html

方法三：利用圆角图片+TABLE布局实现 http://alansun.iteye.com/blog/582457

代码：
<html>
<head>
<title>RoundedCorner</title>
<style>
.rounded{
border:0px none;
}

.rounded *,.rounded table,.rounded tr,.rounded td,.rounded div,.rounded span{
padding:0px;
overflow: hidden;
}

.rounded .title .lt{
background-image:url(lt.png);
background-repeat:no-repeat;
background-position: left top;
}

.rounded .title .mt{
background-color:#c0c0c0;
line-height:18px;
vertical-align:top;
}

.rounded .title .rt{
background-image:url(rt.png);
background-repeat:no-repeat;
background-position: right top;

}
.rounded .bottom .lb{
background-image:url(lb.png);
background-repeat:no-repeat;

}

.rounded .bottom .mb{
background-image:url(mb.png);
background-repeat:repeat-x;
}

.rounded .bottom .rb{
background-image:url(rb.png);
background-repeat:no-repeat;
}

.rounded .lm{
border-left:1px solid #c0c0c0;
}

.rounded .rm{
border-right:1px solid #c0c0c0;
}

.rounded .bodyDiv{
text-align:left;
padding-top:1px;
padding-bottom:1px;

}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="rounded">
<tbody>
<tr class="title">
<td class="lt" width="14" height="18"><div style="width:14px;font-size:0px;"/></td>
<td class="mt">
tilte here
</td>
<td width="14" class="rt"><div style="width:14px;font-size:0px;" /></td>
</tr>
<tr>
<td class="lm"> </td>
<td class="bodyDiv">
<div style="padding:20px;">
这是内容区域。
<br/>
1.兼容浏览器差异是一件相当痛苦的事情；<br/>
2.为了WEB前端工作人员的生命健康，请推动IE6的灭亡。<br/>
</div>
</td>
<td class="rm"> </td>
</tr>

<tr class="bottom">
<td class="lb" height="12"></td>
<td class="mb"></td>
<td class="rb"><div style="width:14px;font-size:0px;" /></td>
</tr>

</tbody>
</table>

</body>
</html>

优点：兼容所有浏览器，容易理解.
缺点：1.代码太罗嗦，不符合DIV+CSS思想，包含太多与布局相关的代码
2.需要自己制作图片。