纯图片高度自适应圆角框的制作

最新推荐文章于 2016-07-12 15:22:01 发布

baiding1123

最新推荐文章于 2016-07-12 15:22:01 发布

阅读量1.1k

点赞数

分类专栏： CSS/CSS3 文章标签： css CSS Css div DIV 圆角框制作

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

版权

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:480;
}
.top{
height:16px;
background:url(images/top.PNG) no-repeat left top;
font-size:1px;
}
.ct{
min-height:30px;
background:url(images/center.PNG) repeat-y left top;
padding:10px;
margin:0;
font-family:"楷体";
font-size:14px;
letter-spacing:3px;
color:#0C0;

}
.bottom{
height:15px;
background:url(images/bottom.png) no-repeat left top;
font-size:1px;
}
</style>
</head>

<body>
<div class="content">
<div class="top"></div>
<div class="ct">中间内容<br /></div>
<div class="bottom"></div></div>
</body>
</html>
原理：全是用背景图片实现的圆角，中间部分也是用背景图片的重复。

图片切成三块：

顶部