css+div+图片实现高度自适应圆角框

来源：互联网发布：大数据营销案例ppt 编辑：程序博客网时间：2024/05/17 23:36

<!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=utf-8" />
<title>高度自适应的圆角框</title>
<style type="text/css">
.content{
width:562px;}
.top{
height:31px;
background-image:url(images/1.PNG);
background-repeat:no-repeat;
background-position:top left;}
.center{
width:559px;
background-color:#F8FCA5;
border-left:1px solid #252D8B;
border-right:1px solid #252D8B;
padding:20px 0 20px 0;
text-align:center;
font-family:"楷体";
font-size:16px;
color:#090;
}
.bottom{

height:29px;
background-image:url(images/2.PNG);
background-repeat:no-repeat;
background-position:bottom left;

}

</style>
</head>

<body>

<div class="content">
<div class="top"></div>
<div class="center">单纯的图片实现的高度自适应圆角框<br />增加部分<br />增加部分<br />增加部分<br />增加部分<br /></div>
<div class="bottom"></div>
</div>
</body>
</html>

用的图片很简单随便什么画图工具就能画出来。

这是顶分的图片：

这是底部的图片：

中间内容是与图片宽度相同、背景色相同、带左右边框并且边框与图片边缘上线的颜色一样 <div>中间部分内容</div>

最终效果图1：

效果图2：