如何只用HTML画出一个圆角的Table表格

html-css015

如何只用HTML画出一个圆角的Table表格,第1张

<ul style="list-style:noneborder:1px #FF0000 solidborder-radius: 4pxwidth:100px">

<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定义方法来实现