在网页中实现圆角表格

最新推荐文章于 2021-06-07 20:14:06 发布

???111

最新推荐文章于 2021-06-07 20:14:06 发布

阅读量369

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guoguo11/archive/2009/06/04/1496173.html

本文介绍了一种使用CSS和HTML实现圆角图片效果的方法。通过特定的DIV结构与CSS样式组合，可以为页面上的图片轻松添加圆角效果。该方案利用了背景图片定位技术，并通过精确的DIV布局确保了圆角的一致性和美观。

首先是准备一个圆角图片，如下：

圆角图片

页面中的div代码：
<DIV class="rcborder">
<DIV class=rct>
<DIV class="l tl1"></DIV>
<DIV class="r tr1"></DIV></DIV>
<div class="content"></div>
<DIV class=rcb>
<DIV class="l bl1"></DIV>
<DIV class="r br1"></DIV></DIV>
</DIV>

关键css代码：

复制代码
0 1 .rcborder
02 { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #fff; MARGIN-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid}
03 .rcb {
04     CLEAR: both; HEIGHT: 5px
05 }
06 .rct .l {
07     FONT-SIZE: 1px; BACKGROUND-IMAGE: url(http://www.cn-web.com/uploads/090423/1_000017_1.gif); OVERFLOW: hidden; WIDTH: 5px; POSITION: relative; HEIGHT: 5px; LEFT: -1px; FLOAT: left; TOP: -1px
08 }
09 .rct .r {
10     FONT-SIZE: 1px; BACKGROUND-IMAGE: url(http://www.cn-web.com/uploads/090423/1_000017_1.gif); OVERFLOW: hidden; WIDTH: 5px; POSITION: relative; HEIGHT: 5px; RIGHT: -1px; FLOAT: right; TOP: -1px
11 }
12 .rcb .l {
13     FONT-SIZE: 1px; BACKGROUND-IMAGE: url(http://www.cn-web.com/uploads/090423/1_000017_1.gif); OVERFLOW: hidden; WIDTH: 5px; POSITION: relative; HEIGHT: 5px; LEFT: -1px; FLOAT: left; TOP: 1px
14 }
15 .rcb .r {
16     FONT-SIZE: 1px; BACKGROUND-IMAGE: url(http://www.cn-web.com/uploads/090423/1_000017_1.gif); OVERFLOW: hidden; WIDTH: 5px; POSITION: relative; HEIGHT: 5px; RIGHT: -1px; FLOAT: right; TOP: 1px
17 }
18
19 .tl1 {
20     BACKGROUND-POSITION: left top
21 }
22 .tr1 {
23     BACKGROUND-POSITION: right top
24 }
25 .bl1 {
26     BACKGROUND-POSITION: left bottom
27 }
28 .br1 {
29     BACKGROUND-POSITION: right bottom
30 }

转载于:https://www.cnblogs.com/guoguo11/archive/2009/06/04/1496173.html