纯CSS制作圆角矩形框知识总结_html/css_WEB-ITnose

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

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

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

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

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

<span style="font-family:KaiTi_GB2312;font-size:24px;">            <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 id="牛腩新闻发布系统后台登录">牛腩新闻发布系统后台登录</h3>                    <img src="/static/imghw/default1.png" data-src="Images/步枪.jpg" class="lazy" alt="logo"    style="max-width:90%"  style="max-width:90%">                    <p>用户名：<textbox id="txtUserName" runat="server"></textbox></p>                    <p>密  码：<textbox id="txtPassword" runat="server" textmode="Password"></textbox></p>                    <p>验证码：123456<textbox id="txtCode" runat="server" cssclass="txtcode" width="104px"></textbox></p>                    <p><button id="btnLogin" runat="server" text="登录"></button><button id="btnCancel" runat="server" text="取消"></button></p>                    <div><div class="footer">版权声明：©<a href="http://niunun.javaeve.com">牛腩</a>  &<a href="http://www.tg029.com" target="blank">众志网</a>
</div></div></span>

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

圆角矩形框的边出现了空白，这是由于在使用了

，在这个正常流中

这个部分的宽度比较大，把左右两边的正常流的边给撑开了，所以出现了断线的部分。那么只要把

的部分从正常流中拿走就可以改正这个缺点，对，就是float属性，下面的效果是经过我半个下午2个小时的不断调试，最终形成的结果：

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

版权声明：本文为博主原创文章，未经博主允许不得转载。