做网页经常利用一些技能，比如在表格的周围加上圆角，如许可以避间接利用表格的直角，而显得过于机器,许多网友都提到过处置的方法，我们拔取最有代表性两种方法来再现圆角表格的网站修建过程。
第一种修建方法：
一、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. 在下面再拔出一个异样边框色彩的细线表格,目前就可以在细线表格里写入内容了。 |
代码以下：
这类表格是否是很眼熟啊？的确，我们可以在许多的大网站找到它的身影。 |
申明：它由两个零丁的表格组成，此中第一个表格是涌现圆角的要害。