本文介绍了三种制作DIV圆角的方法：通过背景重叠、使用图片以及纯CSS实现。详细讲解了每种方法的实现原理和代码示例，帮助读者理解如何为网页元素添加圆角效果。
今天公司的美工辞职了，页面设计方面的人暂时没人做，我就接手做了，以前总感觉自己在网站制作方面最缺乏能力，但真正做起来也感觉蛮好玩的，主要是配色方面比较差，所以就参考看国外一些做的漂亮网站的配色，其中我感觉比较麻烦的就是DIV圆角的制作，如果一个DIV加上圆角效果的话会变好看许多，以下就自己制作DIV圆角的一些总结。
1、用两张背景重叠制作圆角DIV
<div id="bg">
<div id="bg_left"></div>
</div>
让ID为bg的做个背景，背景向右对齐，向左延伸。
然后让ID为bg_left的浮动在左边，宽度BG的。
bg_left的背景就是左边的圆角向右延伸，但宽度小于bg，bg的背景就是右圆角向左延伸，如不用做透明的话，宽度多少就无所谓了，当然，方向也可以反过来，让bg_left这个框float在右边。
2、用图片制作DIV圆角4个方向
先把一个DIV分为 上中下 3个部分 3个宽度都一样。
上面做3个DIV 左边用一个圆角的左上角图片，中间就用线条，右边用圆角的右上角图片。
中间就不变
下面也和上面的制作方法一样，只是圆角的图片不一样。
3、用CSS
<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="
最低0.47元/天 解锁文章
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
