作為一個(gè)新手，個(gè)人覺(jué)得難點(diǎn)在：
1.陰影的使用（外框，賬戶欄，密碼欄，button）
2.賬戶欄，密碼欄的布局
3.button顏色漸變
下面給出一些思路，也希望大家提供一些簡(jiǎn)潔的方法幫助更多的新手。

HTML 代碼如下：

 body  div >
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語(yǔ)法：
E {box-shadow: length length length ? length ?|| color }
也就是：E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
換句說(shuō)：
對(duì)象選擇器 {box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色}
box-shadow取值：
陰影類型：此參數(shù)是一個(gè)可選值，如果不設(shè)值，其默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內(nèi)陰影，也就是說(shuō)設(shè)置陰影類型為“inset”時(shí)，其投影就是內(nèi)陰影；
X-offset:是指陰影水平偏移量其值可以是正負(fù)值可以取正負(fù)值，如果值為正值，則陰影在對(duì)象的右邊，反之其值為負(fù)值時(shí)，陰影在對(duì)象的左邊；
Y-offset:是指陰影的垂直偏移量，其值也可以是正負(fù)值，如果為正值，陰影在對(duì)象的底部，反之其值為負(fù)值時(shí)，陰影在對(duì)象的頂部；
陰影模糊半徑：此參數(shù)是可選，，但其值只能是為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個(gè)陰影都延展擴(kuò)大，反之值為負(fù)值是，則縮小
陰影顏色：此參數(shù)可選，如果不設(shè)定任何顏色時(shí)，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無(wú)色，也就是透明，建議不要省略此參數(shù)。
賬戶欄，密碼欄的布局：
賬戶欄，密碼欄的陰影同上面的背景框的做法，就不多解釋了，難點(diǎn)主要在如何在focus這兩個(gè)input的時(shí)候如何改變整個(gè)賬戶欄，密碼欄背景顏色。因?yàn)槲覀冊(cè)趂ocus的時(shí)候賬戶欄，密碼欄中前面的小圖標(biāo)不能消失，所以我們用一個(gè)span標(biāo)簽將icon放置到input標(biāo)簽前面。HTML代碼如下：
 li div >
為了達(dá)到focus的效果我們需要把input的大小調(diào)整到和div.text同樣大小，這時(shí)我們發(fā)現(xiàn)span標(biāo)簽會(huì)一直占據(jù)input前面的空間，這時(shí)我們需要span使用position:absolute使其脫離文檔流，調(diào)整好icon的位置后，對(duì)input使用padding-left使placeholder，以及我們focus時(shí)輸入的內(nèi)容右移，然后整個(gè)input就充滿了賬戶欄，密碼欄。具體的html' target='_blank'>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的樣式做出來(lái)，這里介紹一下CSS3的背景漸變屬性linear-gradient：
語(yǔ)法：
 linear-gradient ：linear-gradient([ point ,]? color-stop [, color-stop point ：[ left | right ]? [ top | bottom ]? || angle ? color-stop ： color [ length | percentage ]?
取值：
left：設(shè)置左邊為漸變起點(diǎn)的橫坐標(biāo)值。
right：設(shè)置右邊為漸變起點(diǎn)的橫坐標(biāo)值。
top：設(shè)置頂部為漸變起點(diǎn)的縱坐標(biāo)值。
bottom：設(shè)置底部為漸變起點(diǎn)的縱坐標(biāo)值。 angle ：用角度值指定漸變的方向（或角度）。 color-stop ：指定漸變的起止顏色。 color ：指定顏色。請(qǐng)參閱顏色值 length ：用長(zhǎng)度值指定起止色位置。不允許負(fù)值 percentage ：用百分比指定起止色位置。
這個(gè)取色是一個(gè)比較繁瑣的過(guò)程，這里可以給大家推薦一款比較討巧的方法，使用button生成器，制作好以后把代碼復(fù)制過(guò)來(lái)就好了。然后加上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);}
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php 其它相關(guān)文章！
相關(guān)閱讀：
JS的閉包與定時(shí)器
JS的時(shí)間對(duì)象與引用類型
以上就是怎樣用CSS3制作登錄框的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。