如何使用CSS3制作登錄框

發(fā)布時(shí)間：2022-02-28 10:28:26 來(lái)源：億速云閱讀：209 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“如何使用CSS3制作登錄框”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用CSS3制作登錄框”這篇文章吧。

　　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語(yǔ)法：

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

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

　　換句說(shuō)：

　　對(duì)象選擇器{box-shadow:投影方式X軸偏移量Y軸偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色}

如何使用CSS3制作登錄框

以上是“如何使用CSS3制作登錄框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡