[DivCss]用图片实现圆角框框(一)

上一篇是圆角菜单，这一篇是圆角框框。
实现圆角框框，我研究出来2种自己还满意的方法。
当然，前题是要简洁，而且要适应不同的高度和宽度。
不多废话，直接开始。

第一种：
用一张N大的图片来做，图片要足够大，以适应不同的高度和宽度。
看图：(准备的是500x500的图片，如果你需要更大的适应，就大点吧，这里只做演示)
[DivCss]用图片实现圆角框框(一)

图片好高，汗~~ 看吧~~ 下面是html代码，超简单：
我个人一般divcss布局的时候，使用下面的html代码做一个“模块”，所以自己的html都不需要改动，只要修改CSS，就能得到任何想要的效果。

<div class="b">
    <div class="bt">标题title</div>
    <div class="bc">内容content</div>
    <div class="bm">更多more</div>
</div>

下面是css代码，可看好了，有点点小复杂。不过不难。

.b  /* box */
{
    position:relative;  /* 为了使 .bm(更多) 飘到右上角 */
    background:#ffffff url(box.gif) no-repeat bottom left;  /* 整个box的背景，定位是下左 */
}
.bt /* box title */
{
    background:#ffffff url(box.gif) no-repeat top left;  /* 还是同一个背景图，但定位是上左 */
    height:28px; line-height:28px;  /* 标题的高度 */
    padding-left:5px;   /* 为了美观，左边空一点 */
    color:#CA1A00; font-size:14px; font-weight:bold;    /* 标题的字段，当然要好看点 */
}
.bc /* box content */
{
    background:#ffffff url(box.gif) no-repeat bottom right;  /* 内容区还是一个背景，定位是下右 */
    margin-left:5px;    /* 注意，给左边5px的内补丁，这样把下左的边框显示出来：重要！ */
}
.bm /* box more */
{
    position:absolute; top:0; right:0;  /* 相对定位，在右上 */
    height:28px; line-height:28px;  /* 高度 */
    background:#ffffff url(box.gif) no-repeat top right;  /* 内容区还是一个背景，定位是上右 */
    padding-right:5px;   /* 为了美观，右边空一点 */
}

照旧，看看效果：(不管什么宽度，高度都自适应，只要你的背景图片够大)
[DivCss]用图片实现圆角框框(一)

用这种方法，你可以做出各种各样的效果出来，嘿嘿~~~ 看下面：

注意事项：请看css代码，“background:#ffffff url(box.gif)...”，我的背景中不过有图片，而且加了一个背景颜色，和网页颜色一样。
为什么呢？想想看~~~ ？？
因为我的背景图片就一条线，其它的地方全是透明的，这样问题来了~~ 如果我不设背景颜色的话？将出现如下的情况：
[DivCss]用图片实现圆角框框(一)
看出来了吧？多出三个东西来，因为图片是透明的，所有其它角上的背景就直接显示出来了，
解决办法是：背景的时候加上背景颜色，或者做背景图片的时候，不要使用透明！！
如果你想让背景透明（比如，“模块”全是透明的，和要显示网页整体的背景，那这种办法不太合适）

下面是牢骚：万恶的IE(6)啊~~~~这种方法在IE(6)下面有一个严重的bug，那就是：
如果“模块”当中有“对象”或是元素的style有 float属性的时候，嘿嘿~~~~
这个显示会出问题。而且是很严重的问题，内容会不显示，被背景颜色给盖住。其它浏览器测试完全正常。

如果想解决以上问题，您可以参考：[DivCss]用图片实现圆角框框(二)

测试通过：IE6/7/8, Chrome, Firefox, Opera, Safair

本文源码下载：http://files.cnblogs.com/Kagilo/divcss.box1.zip

作者：卡吉洛(Kagilo)
转载请声明！

转载于:https://www.cnblogs.com/Kagilo/archive/2009/04/03/divcss-box1.html

[DivCss]用图片实现圆角框框(一)

相关推荐