纯CSS制作圆角矩形框知识总结_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 11:38:13

原创

1599人浏览过

在制作后台登录页的时候，需要从网页上面把那个圆角矩形框选取下来，然后通过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>                    @@##@@                    <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>

登录后复制

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

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