您的位置：首页 > 其它

DIV圆角的制作

2008-05-08 00:18 507 查看

今天公司的美工辞职了，页面设计方面的人暂时没人做，我就接手做了，以前总感觉自己在网站制作方面最缺乏能力，但真正做起来也感觉蛮好玩的，主要是配色方面比较差，所以就参考看国外一些做的漂亮网站的配色，其中我感觉比较麻烦的就是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="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航