如何轻松制作网站圆角边框效果？有妙招吗？

第一种：CSS3圆角边框

CSS3圆角的优点

使用CSS3圆角边框，我们可以摆脱传统方法中必须使用多张图片作为背景图案的繁琐。CSS3的引入， 为我们带来了以下几个优点：

• 减少维护工作量不再需要为图片生成、更新和编写网页代码。
• 提高网页性能无需发出多余的HTTP请求，网页载入速度更快。
• 增加视觉可靠性避免背景图片下载失败导致的视觉效果不佳。

border-radius属性

CSS3圆角只需设置一个属性：border-radius。你只需为这个属性提供一个值，就能一边设置四个圆角的半径。所有合法的CSS度量值都可以使用，如em、ex、pt、px、百分比等。

比方说下面是一个div方框：

现在设置它的圆角半径为15px：

这条语句一边将每个圆角的"水平半径"和"垂直半径"都设置为15px。

border-radius可以一边设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角。

border-radius还可以用斜杠设置第二组值。这时第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以一边设置1到4个值，应用规则与第一组值相同。

浏览器支持： - 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即可。

html div { -moz-border-radius: 15px; border-radius: 15px; }

再说一个， 早期版本Firefox的单个圆角的语句，与标准语法略有不同。

html div { -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; }

第二种：使用图片制作圆角边框

制作步骤

1. 制作两个圆角的图片， 这两个图片可以先做一个图片，然后用Photoshop软件垂直翻转一下就可以了。
2. 在两个图片中间插入一个背景颜色同图片一样的表格， 长度也设为图片的长度，将这个表格的单元间距设为1，其他都为0。
3. 将表格的单元格背景色设置为白色。
4. 再说说我们就可以在表格里面填写内容了 我们可以把这个部分当然一个整体，复制并粘贴到页面上不同的地方，当然你也可以改变整个圆角表格的尺寸，要做的就是改变圆角图片和插入表格的尺寸了。

第三种：使用表格和图片结合制作圆角边框

制作步骤

1. 准备工作：制作两个小圆角图片，如右图。可以先制作一个，然后使用相关软件翻转就可以了。
2. 制作一个一行三列的表格。表格的单元间距、单元边距、边框均设置为零。宽度默认为100%，也可以设成固定的宽度，本例设为150像素。
3. 单击“显示隐藏指导方针”按钮，并将第一步的两个小图片分别插入第一、第三单元格。然后选中左边的小图片，再按一下向左的方向键，再说说按退格键，将小图片前的一个空格删除。
4. 设置第一个单元格的水平对齐方式为左对齐， 垂直对齐方式为顶部，使图片在单元格的左上方，第三个单元格的水平对齐方式为右对齐，垂直对齐方式为顶部，使图片在单元格的右上方。
5. 将每个单元单元格的背景色设置为插入的图片颜色相同。
6. 在下面再插入一个同样边框颜色的细线表格，现在就可以在细线表格里写入内容了。

通过以上三种方法，你可以轻松地在网站中制作圆角边框效果。选择适合你的方法，让你的网页设计更加美观和专业。

---