<li>123456</li>
<li>1231544</li>
</ul>
用这种方法也行,在样式里面加上border-radius: 4px,这个就表示圆角;但这个是html5的标签;
一般是先用PS做好要的圆角如果固定的话就用一张图片就OK了
要是想上下(左右)自适应的话就做成上下(左右)两张图片
要是上下左右都要自适应的话就做成4张
最后把他们加到属性里就OK了
我有一个制作圆角的软件 留一个邮箱 我给你发过去
div.RoundedCorner{background: #9BD1FAwidth: 200}width的数值后加上px单位(否则一般会被当成百分率的),并可通过修改此值大小来调整圆角表格的大小,修改后为:
div.RoundedCorner{background: #9BD1FAwidth: 200px}
如果还想可调整圆角表格的高度,则还需要做一下处理:
新增.rcontent节点
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="rcontent">
<br>无图片实现圆角框<br><br>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
并在css中定义
.rcontent {
height:400px/**可通过修改此处的height的值来改变表格的高度**/
}
附上完整代码:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/htmlcharset=utf-8">
<style type="text/css">
div.RoundedCorner{background: #9BD1FAwidth: 200px}
b.rtop, b.rbottom{display:blockbackground: #FFF}
b.rtop b, b.rbottom b{display:blockheight: 1pxoverflow: hiddenbackground: #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 1pxheight: 2px}
.rcontent {
height:400px
}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="rcontent">
<br>无图片实现圆角框<br><br>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
你所列举的代码的圆角原理:
能很好的兼容IE和FF浏览器,是使用多个b标签的巧妙细致组合实现的,
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 1pxheight: 2px}
组合形式类似如:(每行都为一个b标签)
-
--
---
---
---
---
--
-
来产生圆弧效果的。
另外还有通过js或-moz-border-radius-topleft: 4px
-moz-border-radius-topright: 4px
-moz-border-radius-bottomright: 4px
-moz-border-radius-bottomleft: 4px
的css定义方法来实现