div+css打造可变高宽的圆角框
发布时间：2011-07-10 21:59:47 作者：佚名 
我要评论
我要评论矩形框在网页中较为常见，不过个人觉得还是圆角框更为美观。那么圆角框是如何用DIV+CSS来实现的呢？
假如把一张圆角框图片直接作为背景来处理，那么高宽就都被定死了，无法随内容而改变大小。今天，我学会了一种方法来设计可变高宽的圆角框。先来看看效果图：
<div id="m_category" class="round2">
<h3>管理中心</h3>
<div class="con">
<p><a href="Categorymanager.aspx">类别管理</a></p>
<p><a href="Newsmanager">新闻管理</a></p>
<p><a href="Addnews">添加新闻</a></p>
</div>
<div class="footer">
<p> </p>
</div>
</div>
css
*
{
padding:0;
margin:0;
}
body
{
font-size:14px;
}
a:link, a:visited
{
color: #000;
text-decoration: none;
}
a:hover
{
color: #00f;
text-decoration: underline;
}
#m_category
{
width:200px;
}
#m_category .con p
{
padding:10px;
}
.round2
{
background-image:url("../images/round2_left_top.gif");
background-position:top left;
background-repeat:no-repeat;
}
.round2 h3
{
background:url("../images/round2_right_top.gif") no-repeat top right;
padding-left:35px;
padding-top:12px;
padding-bottom:12px;
font-size:16px;
font-weight:bold;
}
.round2 .con
{
height:200px;
padding:0 20px;
background:url("../images/round2_right_middle.gif") repeat-y top right;
}
.round2 .footer
{
background:url("../images/round2_left_bottom.gif") no-repeat bottom left;
}
.round2 .footer p
{
background:url("../images/round2_right_bottom.gif") no-repeat bottom right;
}
从上述代码中可以看到，round2将图片1作为了背景，h3标签将图片2作为了背景，con将图片3作为了背景，foote中的p标签将图片4作为了背景，footer将标签5作为了背景。我们先从最底下的那层开始讲起。当round2中的内容不足以填满第1个图片时，那么只显示图片1的部分。此时，将图片5叠加到图片1上。这样就达到了控制高度的目的。控制宽度其实也是同一个原理。我们通过h3标签和p标签将图片2和图片4叠加到图片1和图片5上，这样就实现了可变宽度。剩下的只要让con中的图片3沿y轴平铺下来，那么整个圆角框的结构就形成了。
这种通过将圆角框分割成5个图片来控制高宽的方法，虽然达到了可变高宽的目的，但是缺点很明显，就是图片1需要切的比较大。有没有更好的方法呢？网上我看到了一种不需要背景图片来实现可变高宽圆角框的方法。
为了达到可变高宽的效果，首先应将图片分割成五块。如下图：
为什么这么分割？为什么图片1需要切成这么大呢？这样就能实现可变高宽了？这些问题不急于回答，我们不妨先来阅读下源码。
复制代码
代码如下:<div id="m_category" class="round2">
<h3>管理中心</h3>
<div class="con">
<p><a href="Categorymanager.aspx">类别管理</a></p>
<p><a href="Newsmanager">新闻管理</a></p>
<p><a href="Addnews">添加新闻</a></p>
</div>
<div class="footer">
<p> </p>
</div>
</div>
css
复制代码
代码如下:*
{
padding:0;
margin:0;
}
body
{
font-size:14px;
}
a:link, a:visited
{
color: #000;
text-decoration: none;
}
a:hover
{
color: #00f;
text-decoration: underline;
}
#m_category
{
width:200px;
}
#m_category .con p
{
padding:10px;
}
.round2
{
background-image:url("../images/round2_left_top.gif");
background-position:top left;
background-repeat:no-repeat;
}
.round2 h3
{
background:url("../images/round2_right_top.gif") no-repeat top right;
padding-left:35px;
padding-top:12px;
padding-bottom:12px;
font-size:16px;
font-weight:bold;
}
.round2 .con
{
height:200px;
padding:0 20px;
background:url("../images/round2_right_middle.gif") repeat-y top right;
}
.round2 .footer
{
background:url("../images/round2_left_bottom.gif") no-repeat bottom left;
}
.round2 .footer p
{
background:url("../images/round2_right_bottom.gif") no-repeat bottom right;
}
从上述代码中可以看到，round2将图片1作为了背景，h3标签将图片2作为了背景，con将图片3作为了背景，foote中的p标签将图片4作为了背景，footer将标签5作为了背景。我们先从最底下的那层开始讲起。当round2中的内容不足以填满第1个图片时，那么只显示图片1的部分。此时，将图片5叠加到图片1上。这样就达到了控制高度的目的。控制宽度其实也是同一个原理。我们通过h3标签和p标签将图片2和图片4叠加到图片1和图片5上，这样就实现了可变宽度。剩下的只要让con中的图片3沿y轴平铺下来，那么整个圆角框的结构就形成了。
这种通过将圆角框分割成5个图片来控制高宽的方法，虽然达到了可变高宽的目的，但是缺点很明显，就是图片1需要切的比较大。有没有更好的方法呢？网上我看到了一种不需要背景图片来实现可变高宽圆角框的方法。
相关文章
- 字符代替圆角尖角也是一种在不使用代码和图片的另类实现吧，本文整理了一些常用的示例，感兴趣的朋友可以收藏下2013-09-12
- css圆角效果的出现引起了网友们的关注，下面以个示例为大家介绍下具体的实现过程，带有注释，新手朋友们容易看的懂2013-09-04
- 想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下： 但凡是前端工程师，都知道IE6，IE7，IE8不支2013-07-02
- css圆角卷起了一阵风波，只用css来做圆角矩形的技术很早就有了,但是在网页的设计过程中,我们通常用图片实现圆角矩形效果。现在网上很多关于无图片实现css圆角矩形的方法,虽2013-03-25
- css 圆角边框的出现结束了传统使用圆角图片的时代，接下来与大家分享下div 边框圆角的实现，感兴趣的你可以参考下哈，希望对你有所帮助2013-03-15
- 本文将开拓性的探讨如何使用字符代替图片实现貌似只有图片才能实现的尖角效果，或是多半使用图片实现的圆角效果;本文提到的一些方法，可能在实际项目中并不实用，关键是帮2013-02-27
- 今天处理了一个页面刷新随机显示图片的功能，发现直角太丑，想实现图片圆角，兼容所有浏览器,于是网上搜集整理了一下，拿出来和大家分享2012-12-06
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。2012-03-28- 实现的方法很简单，其实就是套2层，其中外层用长背景，内层用短背景盖住。拿高度自适应来说，可以用一个div（用长背景居底铺）嵌套一个h2（用短背景居顶铺）标签2012-02-17
background-postion定位与图片结合实现圆角效果
background-postion 背景默认铺设位置的起点为：元素的左上角.2011-07-27
最新评论