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

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

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

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

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

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

            
                                                
                   主要内容                
                                            

/*圆角框的制作-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 ;}

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

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

牛腩新闻发布系统后台登录
                    
用户名：
                    
密  码：
                    
验证码：123456
                    
                    
版权声明：©牛腩  &众志网

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

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

，在这个正常流中

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

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

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

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