导读：在网页上，我们经常看到一些直角的边框，有时候就显得没有人性化，很刻板。而且嵌套进去后，宽度大小不可以改变，有时候在使用的时候，不方便。这时候，就得制作可变宽度的，并且边角不是直角的边框。
一、准备工作（截图）
1，基础图形
2，截图图形（要求）
说明：由于第四部分将要用于垂直平铺，所以，也可以截取一小段，哪怕只有1毫米都行。但别的部分，都必须按照自己需求规格的大小截取。
二、具体应用
说明：将图形的五部分截取出来之后，那么我们就可以很快的制作出自己的圆角框。就像拼图一样，将5个小块，拼成一个整体就行。
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">/*可变宽度的圆角框样式*/
.round2 {/*左上角，第一部分,不重复*/
background-image: url("../Images/circle2_lefttop.png");
background-position: top left;
background-repeat: no-repeat;
}
.round2 h3 {/*右上角，第三部分,不重复*/
background-image: url("../Images/circle2_righttop.png");
background-position: top right;
background-repeat: no-repeat;
}
.round2 .con {/*右中间，第四部分,延沿Y轴平铺*/
background-image: url("../Images/circle2_rightmiddle.png");
background-position: top right;
background-repeat: repeat-y;
}
.round2 .footer {/*左下角，第二部分,不重复*/
background-image: url("../Images/circle2_leftlow.png");
background-position: bottom left;
background-repeat: no-repeat;
}
.round2 .footer p {/*右下角，第五部分,不重复*/
background-image: url("../Images/circle2_rightlow.png");
background-position: bottom right;
background-repeat: no-repeat;
}</span></span>注意：1，图像的放置位置（background-position），一共有5个，分别是：top left，top right，top right，bottom left，bottom right。
2，正是因为右中间的（第四部分）是要沿着Y轴平铺以改变宽度，所以在截图的时候，不需要太长。
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;"><div id="m_category" class="round2">
<h3>管理中心</h3>
<div class="con">
<p><a href="categorymaneger.aspx">类别管理</a></p>
<p><a href="newsmanager.aspx">新闻管理</a></p>
<p><a href="addnews.aspx">添加新闻</a></p>
</div>
<div class="footer">
<p> </p>
</div>
</div></span></span>说明：因为有5个图像，所以需要有5个分类让其放置。首先是：round2，h3，con，footer，最后是一个空格（<p> </p>）。三、效果
说明：因为截图的原因，第四部分和第三部分出现了不对齐。
注意：虽然这个边框可大可小，但它有一个最大值，就是它的最大长，为第二部分的长；最大框，为第一部分的宽。如果超出了这个界限，圆角边框就会出现断层。
四、感受
开始的时候，是做的一个圆角框。后来慢慢的，才做的可变宽度的。一开始的时候，听说什么五图像制作圆角边框，吓得够呛，提起了十分的精神听。现在，觉得这个东西的制作，真的就是用几个积木拼图一样。刚开始的害怕，可能还是因为不了解。