可变宽度的圆角框
以前在看牛腩做圆角框时感觉好神奇,但一直没有实现,最近自己做了个网上鲜花销售系统,自叹后台界面做得太难看,所有决定做个可变宽度的圆角框,在谷歌浏览器修改了好久,后来才发现时margin-top 和margin-bottom 要设置为0。。。。下面这图是做好的了:
前台代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="Menu"class="round2">
<h3>
常用操作</h3>
<div class="con">
<p><a href="warekind.aspx" target="main">鲜花分类</a></p>
<p><a href="#">站内信息管理</a></p>
<p><a href="Goodsfangshi.aspx" target="main">付款及送货方式</a>
<p><a href="CreateAdmin.aspx" target="main">用户管理</a></p>
<p><a href="showware.aspx" target="main">鲜花添加</a></p>
<p><a href="wareguanli.aspx" target="main">鲜花管理</a></p>
<p><a href="../Default.aspx" target="main">访问主页</a></p>
</div>
<div class="footer">
<p>
</p>
</div>
</div>
<h3>
常用操作</h3>
<div class="con">
<p><a href="warekind.aspx" target="main">鲜花分类</a></p>
<p><a href="#">站内信息管理</a></p>
<p><a href="Goodsfangshi.aspx" target="main">付款及送货方式</a>
<p><a href="CreateAdmin.aspx" target="main">用户管理</a></p>
<p><a href="showware.aspx" target="main">鲜花添加</a></p>
<p><a href="wareguanli.aspx" target="main">鲜花管理</a></p>
<p><a href="../Default.aspx" target="main">访问主页</a></p>
</div>
<div class="footer">
<p>
</p>
</div>
</div>
css代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/************做个圆角*************/
.round2
{
background-image: url(../images/round2_left_top.gif);
background-repeat: no-repeat;
background-position: top left;
}
.round2 h3
{
background-image: url(../images/round2_right_top.gif);
background-repeat: no-repeat;
background-position: top right;
padding-top: 10px;
padding-left: 38px;
margin-bottom: 0px;
margin-top: 0px;
}
.con
{
background-image: url(../images/round2_right_middle.gif);
background-position: top right;
background-repeat: repeat-y;
padding: 20px;
margin-bottom: 0px;
margin-top: 0px;
padding-left: 40px;
font-size: 14px;
}
.con a
{
color: Black;
}
.footer
{
background-image: url(../images/round2_left_bottom.gif);
background-repeat: no-repeat;
background-position: bottom left;
}
.footer p
{
background-image: url(../images/round2_right_bottom.gif);
background-position: bottom right;
background-repeat: no-repeat;
margin-top: 0px;
margin-bottom: 0px;
}
#Menu
{
float: left;
}
#Menu .con
{
}
.round2
{
background-image: url(../images/round2_left_top.gif);
background-repeat: no-repeat;
background-position: top left;
}
.round2 h3
{
background-image: url(../images/round2_right_top.gif);
background-repeat: no-repeat;
background-position: top right;
padding-top: 10px;
padding-left: 38px;
margin-bottom: 0px;
margin-top: 0px;
}
.con
{
background-image: url(../images/round2_right_middle.gif);
background-position: top right;
background-repeat: repeat-y;
padding: 20px;
margin-bottom: 0px;
margin-top: 0px;
padding-left: 40px;
font-size: 14px;
}
.con a
{
color: Black;
}
.footer
{
background-image: url(../images/round2_left_bottom.gif);
background-repeat: no-repeat;
background-position: bottom left;
}
.footer p
{
background-image: url(../images/round2_right_bottom.gif);
background-position: bottom right;
background-repeat: no-repeat;
margin-top: 0px;
margin-bottom: 0px;
}
#Menu
{
float: left;
}
#Menu .con
{
}