网站建设课程之圆角边框怎么样制作

做网页常常用一些方法，譬如在表格的四周加上圆角，如此可以避直接用表格的直角，而看上去过于呆板,不少网友都提到过解决的方法，大家选取最有代表性两种办法来再现圆角表格的网站建设过程。第一种做法：1、CSS3圆角的优点
传统的圆角生成策略，需要用多张图片作为背景图案。CSS3的出现，使得大家再也不必费时去制作这类图片了，而且还有其他多个优点：* 降低维护的工作量。图片文件的生成、更新、撰写网页代码，这类工作都不再需要了。
* 提升网页性能。因为不必再发出多余的HTTP请求，网页的载入速度将变快。
* 增加视觉靠谱性。某些状况下（互联网拥堵、服务器出错、网速过慢等等），背景图片会下载失败，致使视觉成效不佳。CSS3就不会发生这样的情况。2、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. 单击“显示隐藏指导方针”按钮，并将第一步的两个小图片分别插入1、第三单元格。然后选中左侧的小图片，再按一下向左的方向键，最后按退格键，将小图片前的一个空格删除。4. 设置第一个单元格的水平对齐方法为左对齐，垂直对齐方法为顶部，使图片在单元格的左上方，第三个单元格的水平对齐方法为右对齐，垂直对齐方法为顶部，使图片在单元格的右上方。5. 将每一个单元单元格的背景色（注意是单元格）设置为插入的图片颜色相同。6. 在下面再插入一个同样边框颜色的细线表格,目前就能在细线表格里写入内容了。
代码如下：
这种表格是否非常眼熟啊？的确，大家可以在不少的大网站找到它的身影。
说明：它由两个单独的表格组成，其中第一个表格是出现圆角的重点。

版权所有：建站宝盒
转载注明来源：网站建设课程之圆角边框怎么样制作
本文版权网址：http://www.wcxywh.com/suizhou/20250625/2168.html