怎样用CSS3制作登录框

　　作为一个新手，个人觉得难点在：

　　1.阴影的使用（外框，账户栏，密码栏，button）

　　2.账户栏，密码栏的布局

　　3.button颜色渐变

　　下面给出一些思路，也希望大家提供一些简洁的方法帮助更多的新手。

　　HTML代码如下：

　　<body>

　　<divclass="wrapper">

　　<divclass="header">Loginto<span>love.ly</span></div>

　　<formaction=""method="post">

　　<ul>

　　<li>

　　<divclass="text">

　　<spanclass="yonghu"></span><inputtype="text"placeholder="IconDeposit">

　　</div>

　　</li>

　　<li>

　　<divclass="password">

　　<spanclass="mima"></span><inputtype="password"placeholder="••••••••••••••">

　　</div>

　　</li>

　　<liclass="remember">

　　<inputtype="checkbox">RememberMe</li>

　　<li>

　　<ahref="">Forgotusernameorpassword?</a>

　　</li>

　　<li>

　　<inputtype="button"value="Login">

　　</li>

　　</ul>

　　</form>

　　<divclass="footer">

　　<p><ahref="">Love.lyHome</a>|<ahref="">Bolg</a>|<ahref="">Work</a>|<ahref="">TermsofUse</a>|<ahref="">ContactMe</a></p>

　　</div>

　　</div></body>

　　form{background:#cccccc;width:260px;height:260px;margin:35pxauto;padding:30px;box-shadow:0px1px2px1px#aaaaaa,

　　inset0px1px1pxrgba(255,255,255,0.7);border-radius:3px;

　　}

　　box-shadow语法：

　　E{box-shadow:<length><length><length>?<length>?||<color>}

　　也就是：E{box-shadow:insetx-offsety-offsetblur-radiusspread-radiuscolor}

　　换句说：

　　对象选择器{box-shadow:投影方式X轴偏移量Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55182.shtml