上一篇是圆角菜单,这一篇是圆角框框。
实现圆角框框,我研究出来2种自己还满意的方法。
当然,前题是要简洁,而且要适应不同的高度和宽度。
不多废话,直接开始。
第一种:
用一张N大的图片来做,图片要足够大,以适应不同的高度和宽度。
看图:(准备的是500x500的图片,如果你需要更大的适应,就大点吧,这里只做演示)
图片好高,汗~~ 看吧~~ 下面是html代码,超简单:
我个人一般divcss布局的时候,使用下面的html代码做一个“模块”,所以自己的html都不需要改动,只要修改CSS,就能得到任何想要的效果。
<div class="bt">标题title</div>
<div class="bc">内容content</div>
<div class="bm">更多more</div>
</div>
下面是css代码,可看好了,有点点小复杂。不过不难。
{
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; /* 为了美观,右边空一点 */
}
照旧,看看效果:(不管什么宽度,高度都自适应,只要你的背景图片够大)
用这种方法,你可以做出各种各样的效果出来,嘿嘿~~~ 看下面:
注意事项:请看css代码,“background:#ffffff url(box.gif)...”,我的背景中不过有图片,而且加了一个背景颜色,和网页颜色一样。
为什么呢?想想看~~~ ??
因为我的背景图片就一条线,其它的地方全是透明的,这样问题来了~~ 如果我不设背景颜色的话?将出现如下的情况:
看出来了吧?多出三个东西来,因为图片是透明的,所有其它角上的背景就直接显示出来了,
解决办法是:背景的时候加上背景颜色,或者做背景图片的时候,不要使用透明!!
如果你想让背景透明(比如,“模块”全是透明的,和要显示网页整体的背景,那这种办法不太合适)
下面是牢骚:万恶的IE(6)啊~~~~这种方法在IE(6)下面有一个严重的bug,那就是:
如果“模块”当中有“对象”或是元素的style有 float属性的时候,嘿嘿~~~~
这个显示会出问题。而且是很严重的问题,内容会不显示,被背景颜色给盖住。其它浏览器测试完全正常。
如果想解决以上问题,您可以参考:[DivCss]用图片实现圆角框框(二)
测试通过:IE6/7/8, Chrome, Firefox, Opera, Safair
本文源码下载:https://files.cnblogs.com/Kagilo/divcss.box1.zip
作者:卡吉洛(Kagilo)
转载请声明!