纯CSS打造圆角矩形框知识总结

纯CSS制作圆角矩形框知识总结

    在制作后台登录页的时候，需要从网页上面把那个圆角矩形框选取下来，然后通过Photoshop进行切割，在进行设置，最后得到需要的登录框的圆角矩形框。如下图。

    但是登录最新的智囊团的那个登录页面的时候，上面的那个圆角矩形框已经没有了，最新的登陆页面跟QQ邮箱登录页面一样，没有了圆角矩形框。所以我就想到了用css自己堆出来一个圆角矩形框，通过查找资料，以及自己的一些使用方法的改进，最终得到了自己所需要的圆角矩形框——纯CSS设计圆角矩形框。

下面讲一下思路：圆角矩形框的难点就在于如何把那个圆角表示出来，其实我们把那个圆角的地方放大一下就会发现，所谓的圆角并不是严格的圆角，只是由于线条看起来比较和谐，那个圆角其实也是直角的框的那个直角。

这就是一个放大了的圆角矩形框，可以看到圆角的具体构成。

明白了原理，下面是代码的实现部分，非常简单：

<span style="font-family:KaiTi_GB2312;font-size:24px;"><%--制作圆角矩形的代码-HTML代码部分--%>
            <div class="divbox">
                <div class="div1"></div>
                <div class="div2"></div>
                <div class="divmiddle">
                   主要内容
                </div>
                <div class="div2"></div>
                <div class="div1"></div>
            </div>
</span>

<span style="font-family:KaiTi_GB2312;font-size:24px;">/*圆角框的制作-CSS代码部分*/

.divbox {
    width: 580px;     
}

/*.div1 .div2 .divmiddle{
    float :right  ;
}*/
.div1 {
    background: #999999;
    border-left: #999999 solid 3px;
    border-right: solid 3px #999;
    margin: 0px 6px;
    height: 3px;
    overflow: hidden;
}

.div2 {
    background: #FFF;
    border-left: #999999 solid 3px;
    border-right: solid 3px #999;
    margin: 0px 2px;
    height: 3px;
    overflow: hidden;
}

.divmiddle {
    height: 285px;
    border-left: #999999 solid 3px;
    border-right: solid 3px #999;
}
.divmiddle p,h3,btnLogin,btnCancel{
    float :right ;
}
</span>

通过代码可以看出，圆角矩形框通过3类的div标签进行组合设计，最终形成一个圆角矩形框。这里关键的是overflow属性，是把被覆盖的内容给隐藏了，所以可以露出自己需要的部分，这里的技巧需要读者自己思考。

接下来就是实战了，在middle中添加如下代码：

<span style="font-family:KaiTi_GB2312;font-size:24px;"><h3>牛腩新闻发布系统后台登录</h3>
                    <img src="Images/步枪.jpg" alt="logo" height="150" width="150"/>
                    <p>用户名：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></p>
                    <p>密  码：<asp:TextBox ID="txtPassword" runat="server" TextMode ="Password"></asp:TextBox></p>
                    <p>验证码：123456<asp:TextBox ID="txtCode" runat="server" CssClass ="txtcode" Width="104px"></asp:TextBox></p>
                    <p><asp:Button ID="btnLogin" runat="server" Text="登录" /><asp:Button ID="btnCancel" runat="server" Text="取消" /></p>
                    <div><div class ="footer">版权声明：&copy;<a href="http://niunun.javaeve.com">牛腩</a>  &<a href="http://www.tg029.com" target="blank">众志网</a></div></div>
</span>

按照正常的理解，在圆角矩形框中会出现一系列的控件，事实上也是如此，但是却出现了另外一个问题，如下图：

圆角矩形框的边出现了空白，这是由于在使用了<h3>，在这个正常流中<h3>这个部分的宽度比较大，把左右两边的正常流的边给撑开了，所以出现了断线的部分。那么只要把<h3>的部分从正常流中拿走就可以改正这个缺点，对，就是float属性，下面的效果是经过我半个下午2个小时的不断调试，最终形成的结果：

    通过float属性，浮动控件，然后再重新进行定位，这样的效果看似简单，后面包含的过程却是对自己知识的一个总结提升，这个过程对我来说非常享受，全身心的投入到最后的效果出来，感觉那真是爽。当然了这个设计效果还是有提升空间的，比如把整个的框移到垂直方向上的中间线，等等，那就发挥你的想象力吧。