做网页经常应用一些技能，比方在表格的周围加上圆角，如许可以也许避间接应用表格的直角，而显得过于呆板,许多网友都提到过办理的办法，我们拔取最有代表性两种办法来再现圆角表格的网站制造过程。
第一种制造办法：
一、CSS3圆角的优点
传统的圆角天生计划，必须应用多张图片作为背景图案。CSS3的泛起，使得我们再也没需要浪掷时辰去制造这些图片了，并且另有其他多个优点：
* 削减维护的事变量。图片文件的天生、更新、编写网页代码，这些事变都不再需要了。
* 提高网页机能。因为没需要再收回过剩的HTTP哀求，网页的载入速率将变快。
* 增进视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等)，背景图片会下载失利，以致视觉效果欠安。CSS3就不会发生这类情况。
二、border-radius属性
CSS3圆角只需设置一个属性：border-radius(寄义是"边框半径")。你为这个属性供给一个值，就能同时设置四个圆角的半径。统统正当的CSS度量值都可以也许应用：em、ex、pt、px、百分比等等。
比方，上面是一个div方框：
今朝设置它的圆角半径为15px：border-radius: 15px;
这条语句同时将每个圆角的"水平半径"(horizontal radius)和"垂直半径"(vertical radius)都设置为15px。
border-radius可以也许同时设置1到4个值。如果设置1个值，暗示4个圆角都应用这个值。如果设置两个值，
响应式网页制作，暗示左上角和右下角应用第一个值，右上角和左下角应用第二个值。如果设置三个值，暗示左上角应用第一个值，右上角和左下角应用第二个值，右下角应用第三个值。如果设置四个值，则顺次对应左上角、右上角、右下角、左下角(顺时针次序)。
border-radius: 15px 5px;
border-radius: 15px 5px 25px;
border-radius: 15px 5px 25px 0px;
(左下角的半径为0，就酿成直角了。)
border-radius还可以也许用斜杠设置第二组值。这时候，第一组值暗示水平半径，第二组值暗示垂直半径。第二组值也可以也许同时设置1到4个值，利用规矩与第一组值相反。
border-radius: 15px 5px / 3px;
border-radius: 15px 5px 25px / 3px 5px;
border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
浏览器撑持：
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都撑持上述的border-radius属性。晚期版本的Safari和Chrome，撑持-webkit-border-radius属性，晚期版本的Firefox撑持-moz-border-radius属性。
今朝来看，为了包管兼容性，只需同时设置-moz-border-radius和border-radius便可。
-moz-border-radius: 15px;
border-radius: 15px;
(注意：border-radius必须放在最后声明，不然可以也许会生效。)
另外,，晚期版本Firefox的单个圆角的语句，与规范语法略有分歧。
* -moz-border-radius-topleft(规范语法：border-top-left-radius)
* -moz-border-radius-topright(规范语法：border-top-right-radius)
* -moz-border-radius-bottomleft(规范语法：border-bottom-left-radius)
* -moz-border-radius-bottomright(规范语法：border-bottom-right-radius)
第二种制造办法：
|
1. 做两个圆角的图片，这两个图片可以也许先做一个图片，然后用photoshop软件垂直翻转一下就行了。 |
|
2. 在两个图片中心拔出一个背景颜色同图片一样的表格，长度也设为图片的长度，将这个表格的单位间距设为1，其他都为0。 |
|
3. 将表格的单位格背风景设置为红色(从2、3两步可以也许看出这里真实是制造了一个细线边框的表格) |
|
4. 最后我们就可以也许在表格内里填写内容了，我们可以也许把这个部份当然一个团体，复制并粘贴到页面上分歧的中心，当然你也可以也许转变扫数圆角表格的尺寸，要做的就是转变圆角图片和拔出表格的尺寸了。 |
代码以下：
http://www.sino-web.net/uploadfiles/20060823094159.gif" width=125>
说明：真实就是两个圆角图片与一个细线表格组合在一同。
第三种制造办法：
|
1. 预备事变：制造两个小圆角图片，如右图。可以也许先制造一个，让后用相干软件翻转就可以也许了 |
|
2. 制造一个一行三列的表格。表格的单位间距、单位边距、边框均设置为零。宽度默许为100%，也可以也许设成活动的宽度，本例设为150像素。 |
|
3. 单击“浮现,隐蔽指点目标”按钮，并将第一步的两个小图片离别拔出第一、第三单位格。然后选中左边的小图片，再按一下向左的偏向键，最后按退格键，将小图片前的一个空格删除。 |
|
4. 设置第一个单位格的水平对齐体例为左对齐，垂直对齐体例为顶部，使图片在单位格的左上方，第三个单位格的水平对齐体例为右对齐，垂直对齐体例为顶部，使图片在单位格的右上方。 |
|
5. 将每个单位单位格的背风景(注意是单位格)设置为拔出的图片颜色相反。 |
|
6. 在上面再拔出一个一样边框颜色的细线表格,今朝就可以也许在细线表格里写入内容了。 |
代码以下：
这类表格是否是很眼熟啊？切实其实，我们可以也许在许多的大网站找到它的身影。 |
说明：它由两个零丁的表格组成，个中第一个表格是泛起圆角的要害。