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

最新推荐文章于 2024-05-22 14:34:14 发布

baiding1123

最新推荐文章于 2024-05-22 14:34:14 发布

阅读量2.8k

点赞数

分类专栏： CSS/CSS3 文章标签： css CSS Css DIV布局高度自适应圆角框

本文链接：https://blog.csdn.net/baiding1123/article/details/8441269

版权

CSS/CSS3 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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

baiding1123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+div+图片实现高度自适应圆角框

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">高度自适应的圆角框.content{ width:562px;}.top{ height:31px; background-image:url(images/1.PNG); back
复制链接

扫一扫

专栏目录