完全自适应的单色或单线圆角框
先给大家看下最终的效果:
实现单色或者单线圆角框完全自适应,使用切下的图片的四角。切开的图片如下图所示:
接下来,看以实现的原理:首先采用水平自适应的方法,使左上、右上部分做到宽度自适应。用同样的方法,使左下、右下部分也可以自适应宽度,这就完成了水平自适应部分。然后在上下两部分的中间加入内容部分,使用背景和边线的方法衔接顶部和底部,做到垂直自适应。
根据以上的分析,制作的页面结构如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>完全自适应的单色或单线圆角框</title>
<style>
.main {
width:600px;
background: #EEE;
}
.top {
height:8px;
/*padding-right:8px;*/
background:url(images/right_top.gif) no-repeat right top;
}
.top_left {
height:8px;
/*padding-left:8px;*/
background:url(images/left_top.gif) no-repeat left top;
}
.top_line {
height:7px;
margin:0 8px;
font-size:0px;
border-top:1px solid #666;
}
.bottom {
height:8px;
/*padding-right:8px;*/
background:url(images/right_bottom.gif) no-repeat right bottom;
}
.bottom_left {
height:8px;
/*padding-left:8px;*/
background:url(images/left_bottom.gif) no-repeat left bottom;
}
.bottom_line {
height:7px;
margin:0 8px;
font-size:0px;
border-bottom:1px solid #666;
}
.round_content {
padding:15px;
border-left:1px solid #666;
border-right:1px solid #666;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="top">
<div class="top_left">
<div class="top_line"></div>
</div>
</div>
<div class="round_content">这是一个单线的圆角框,可以在不同大小的浏览器窗口进行测试该样式的显示效果<br />
增加的内容<br />
增加的内容<br />
firefox能解析第一段,后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了,所以只认background:#ffc,看到的是黄色;
ie7前两短都能认,以最后的为准,所以最后解析是background:#ccc,看到的是灰色;
ie6三段都能认,而且“_”这个只有ie6能认,所以最后解析是_background:#000,看到的是黑色
阿门!已经是最简单和最好理解的写法了,如果你是google进来的,我可以很负责任的告诉你,这种方法是ok的,我测试过。
ie8的那段兼容7的代码我也测试过了,在我现在的windos 7 测试版所带的ie8是没问题的,以后ie8正式版出来还管不管用就不知道了。
ps:如果你发现按我这样写还是有问题的话,请查看一下你的html头,看看
之前的内容是不是这样的标准写法 </div>
<div class="bottom">
<div class="bottom_left">
<div class="bottom_line"></div>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
.main {
width:600px;
background: #EEE;
}
.top {
height:8px; /*高度必须和北京的高度一致*/
/*padding-right:8px;*/
background:url(images/right_top.gif) no-repeat right top; /*北京的属性设置*/
}
.top_left {
height:8px;
/*padding-left:8px;*/
background:url(images/left_top.gif) no-repeat left top;
}
.top_line {
height:7px; /总共8px,边框1px,剩余7px/
margin:0 8px;/*上文中蓝色的代码和本段蓝色代码二取一,即可*/
font-size:0px;/*解决ie6中空block的高度为1单位的font-size问题*/
border-top:1px solid #666;
}
.bottom {
height:8px;
/*padding-right:8px;*/
background:url(images/right_bottom.gif) no-repeat right bottom;
}
.bottom_left {
height:8px;
/*padding-left:8px;*/
background:url(images/left_bottom.gif) no-repeat left bottom;
}
.bottom_line {
height:7px;
margin:0 8px;
font-size:0px;
border-bottom:1px solid #666;
}
.round_content {
padding:15px;
border-left:1px solid #666;
border-right:1px solid #666;
}
</style>