如何用CSS3制作登录框
作为一个新手，个人觉得难点在：
1.暗影的使用（外框，账户栏，密码栏，button）
2.账户栏，密码栏的规划
3.button色彩渐变
下面给出一些思绪，也但愿大家供给一些简约的办法帮忙更多的新手。
HTML 代码如下：
<body>
<div class="wrapper">
<div class="header">Login to <span>love.ly</span></div>
<form action="" method="post">
<ul>
<li>
<div class="text">
<span class="yonghu">?</span><input type="text" placeholder="IconDeposit">
</div>
</li>
<li>
<div class="password">
<span class="mima">?</span><input type="password" placeholder="??????????????">
</div>
</li>
<li class="remember">
<input type="checkbox">Remember Me </li>
<li>
<a href="">Forgot username or password?</a>
</li>
<li>
<input type="button" value="Login">
</li>
</ul>
</form>
<div class="footer">
<p>Love.ly Personal Blog .PSD Template <a href="">Copyright ?2012 Matt Gentile</a></p>
<p><a href="">Love.ly Home</a> | <a href="">Bolg </a> | <a href="">Work</a> | <a href="">Terms of Use</a> | <a href="">Contact Me</a></p>
</div>
</div></body>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: <length> <length> <length>?<length>?||<color>}也就是：E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选中器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 暗影含糊半径 暗影扩展半径 暗影色彩}
box-shadow取值：
暗影类型：此参数是一个可选值，假如不设值，其默许的投影方式是外暗影；假如取其独一值“inset”,就是将外暗影变成内暗影，也就是说设定暗影类型为“inset”时，其投影就是内暗影；
X-offset:是指暗影水平偏移量其值可以是正负值可以取正负值，假如值为正值，则暗影在对象的右侧，反之其值为负值时，暗影在对象的左边；
Y-offset:是指暗影的垂直偏移量，其值也可以是正负值，假如为正值，暗影在对象的底部，反之其值为负值时，暗影在对象的顶部；
暗影含糊半径：此参数是可选，，但其值只能是为正值，假如其值为0时，表示暗影不具有含糊结果，其值越大暗影的边沿就越含糊；
暗影扩展半径：此参数可选，其值可以是正负值，假如值为正，则整个暗影都延展扩大，反之值为负值是，则缩小
暗影色彩：此参数可选，假如不设定任何色彩时，阅读器会取默许色，但各阅读器默许色不一样，特殊是在webkit内核下的safari和chrome阅读器将无色，也就是透亮，倡议不要省略此参数。
账户栏，密码栏的规划：
账户栏，密码栏的暗影同上面的背景框的做法，就不多说明了，难点主要在怎样在focus这两个input的时候怎样改动整个账户栏，密码栏背景色彩。由于我们在focus的时候账户栏，密码栏中前面的小图标不克不及消逝，所以我们用一个span标签将icon放置到input标签前面。HTML代码如下：
<li> <div class="text">
<span class="yonghu">?</span><input type="text" placeholder="IconDeposit">
</div></li><li> <div class="password">
<span class="mima">?</span><input type="password" placeholder="??????????????">
</div></li>为了到达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>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);<point>：[ left | right ]? [ top | bottom ]? || <angle>?<color-stop>：<color> [ <length> | <percentage> ]?
取值：
left：设定左边为渐变起点的横坐标值。
right：设定右侧为渐变起点的横坐标值。
top：设定顶部为渐变起点的纵坐标值。
bottom：设定底部为渐变起点的纵坐标值。 <angle>：用角度值指定渐变的标的目的（或角度）。 <color-stop>：指定渐变的起止色彩。 <color>：指定色彩。请参阅色彩值 <length>：用长度值指定起止色位置。不同意负值 <percentage>：用百分比指定起止色位置。
这个取色是一个比力繁琐的历程，这里可以给大家引荐一款比力讨巧的办法，使用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);
}信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！
相关阅读：
JS的闭包与按时器
JS的时间对象与援用类型
以上就是怎样用CSS3制作登录框的具体内容，更多请关注百分百源码网其它相关文章！
