完全自适应的单色或单线圆角框

来源：互联网发布：win10ssd优化编辑：程序博客网时间：2024/04/28 21:17

完全自适应的单色或单线圆角框

先给大家看下最终的效果：

实现单色或者单线圆角框完全自适应，使用切下的图片的四角。切开的图片如下图所示：

接下来，看以实现的原理：首先采用水平自适应的方法，使左上、右上部分做到宽度自适应。用同样的方法，使左下、右下部分也可以自适应宽度，这就完成了水平自适应部分。然后在上下两部分的中间加入内容部分，使用背景和边线的方法衔接顶部和底部，做到垂直自适应。

根据以上的分析，制作的页面结构如下：

<!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>