用CSS3制作登录框的方法-创新互联

这篇文章将为大家详细讲解有关用CSS3制作登录框的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

启东ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

作为一个新手，个人觉得难点在：
1.阴影的使用（外框，账户栏，密码栏，button）
2.账户栏，密码栏的布局
3.button颜色渐变
下面给出一些思路，也希望大家提供一些简洁的方法帮助更多的新手。

HTML 代码如下：


    
        Login to love.ly
        
            
                
                    
                        
                    
                
                
                    
                        
                    
                
                
                    Remember Me                
                
                    Forgot username or password?
                
                
                    
                
            
        
        
            Love.ly Personal Blog .PSD Template Copyright ©2012 Matt Gentile
            Love.ly Home | Bolg             | Work | Terms of Use | Contact Me

form{        background: #cccccc;        width: 260px;        height: 260px;        margin: 35px auto;        padding: 30px;        box-shadow:0px 1px 2px 1px #aaaaaa,
                   inset 0px 1px 1px rgba(255,255,255,0.7);        border-radius: 3px;
    }

box-shadow语法：

E {box-shadow:   ??||}

也就是：E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

用CSS3制作登录框的方法

box-shadow取值：
阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

账户栏，密码栏的布局：

用CSS3制作登录框的方法

账户栏，密码栏的阴影同上面的背景框的做法，就不多解释了，难点主要在如何在focus这两个input的时候如何改变整个账户栏，密码栏背景颜色。因为我们在focus的时候账户栏，密码栏中前面的小图标不能消失，所以我们用一个span标签将icon放置到input标签前面。HTML代码如下：

为了达到focus的效果我们需要把input的大小调整到和div.text同样大小，这时我们发现span标签会一直占据input前面的空间，这时我们需要span使用position:absolute使其脱离文档流，调整好icon的位置后，对input使用padding-left使placeholder，以及我们focus时输入的内容右移，然后整个input就充满了账户栏，密码栏。具体的CSS样式如下：

ul li div{    width: 260px;    height: 40px;    background: #e1dcd8;    color: rgb(98,94,91);    box-shadow: inset 0px 2px 5px #aaaaaa;    border-radius: 5px;    position: relative;
}ul li .yonghu{    font-family: iconfont;    position: absolute;    top: 12px;    left: 10px;
}ul li .mima{    font-family: iconfont;    position: absolute;    top: 12px;    left: 10px;
}ul li div input{    height: 40px;    width: 190px;    padding: 0 35px;    border: none;    background: #e1dcd8;    color: rgb(98,94,91);    box-shadow:            0px 1px 1px rgba(255,255,255,0.7),
            inset 0px 2px 5px #aaaaaa;    border-radius: 5px;
}ul li input:focus{    outline: none;    background: #f5f2ef;
}

我们需要先将将button的样式做出来，这里介绍一下CSS3的背景渐变属性linear-gradient：
语法：

：linear-gradient([ ,]? [, ]+);：[ left | right ]? [ top | bottom ]? || ?： [  |  ]?

取值：

left：设置左边为渐变起点的横坐标值。
right：设置右边为渐变起点的横坐标值。
top：设置顶部为渐变起点的纵坐标值。
bottom：设置底部为渐变起点的纵坐标值。：用角度值指定渐变的方向（或角度）。：指定渐变的起止颜色。：指定颜色。请参阅颜色值：用长度值指定起止色位置。不允许负值：用百分比指定起止色位置。

这个取色是一个比较繁琐的过程，这里可以给大家推荐一款比较讨巧的方法，使用button生成器，制作好以后把代码复制过来就好了。然后加上hover，active样式我们的button就完成了。
下面是button的CSS样式：

ul li input[type*="button"]{    width: 100%;    height: 40px;    font-family: Arial, Helvetica, sans-serif;    font-size: 18px;    color: #ffffff;    background: -moz-linear-gradient(
            top,
            #94aa64 0%,
            #7a924a 50%,
            #607738);    background: -webkit-gradient(
            linear, left top, left bottom,
            from(#94aa64),            color-stop(0.50, #7a924a),            to(#607738));    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border-radius: 5px;    border: 1px solid #7d8862;    -moz-box-shadow:            0px 1px 0px rgba(170,170,170,1),
            inset 0px 1px 1px rgba(255,255,255,0.7);    -webkit-box-shadow:            0px 1px 0px rgba(170,170,170,1),
            inset 0px 1px 1px rgba(255,255,255,0.7);    box-shadow:            0px 1px 0px rgba(170,170,170,1),
            inset 0px 1px 1px rgba(255,255,255,0.7);    text-shadow:            0px -1px 0px rgba(000,000,000,0.3),            0px 0px 0px rgba(255,255,255,0);
}ul li input[type*="button"]:hover{    opacity: 0.8;
}ul li input[type*="button"]:active{    width: 100%;    height: 40px;    font-family: Arial, Helvetica, sans-serif;    font-size: 18px;    color: #ffffff;    background: -moz-linear-gradient(
            top,
            #607738 0%,
            #7a924a 50%,
            #94aa64 );    background: -webkit-gradient(
            linear, left top, left bottom,
            from(#607738),            color-stop(0.50, #7a924a),            to(#94aa64));    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border-radius: 5px;    border: 1px solid #7d8862;    -moz-box-shadow:            0px -1px 0px rgba(170,170,170,1),
            inset 0px -1px 1px rgba(255,255,255,0.7);    -webkit-box-shadow:            0px -1px 0px rgba(170,170,170,1),
            inset 0px -1px 1px rgba(255,255,255,0.7);    box-shadow:            0px -1px 0px rgba(170,170,170,1),
            inset 0px -1px 1px rgba(255,255,255,0.7);    text-shadow:            0px 1px 0px rgba(000,000,000,0.3),            0px 0px 0px rgba(255,255,255,0);
}

关于用CSS3制作登录框的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

分享文章：用CSS3制作登录框的方法-创新互联
文章来源：http://cdiso.cn/article/cchdii.html

用CSS3制作登录框的方法-创新互联

其他资讯