牛腩新闻发布系统（四）：五图像制作可变宽度的圆角框

导读：在网页上，我们经常看到一些直角的边框，有时候就显得没有人性化，很刻板。而且嵌套进去后，宽度大小不可以改变，有时候在使用的时候，不方便。这时候，就得制作可变宽度的，并且边角不是直角的边框。

一、准备工作（截图）

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>&nbsp;</p>）。

 

 

 

三、效果

 

说明：因为截图的原因，第四部分和第三部分出现了不对齐。

注意：虽然这个边框可大可小，但它有一个最大值，就是它的最大长，为第二部分的长；最大框，为第一部分的宽。如果超出了这个界限，圆角边框就会出现断层。

 

四、感受

开始的时候，是做的一个圆角框。后来慢慢的，才做的可变宽度的。一开始的时候，听说什么五图像制作圆角边框，吓得够呛，提起了十分的精神听。现在，觉得这个东西的制作，真的就是用几个积木拼图一样。刚开始的害怕，可能还是因为不了解。