摘要：CSS3設(shè)計(jì)一個(gè)簡(jiǎn)潔的用戶登錄界面，可作為網(wǎng)站后臺(tái)、用戶中心的登錄模板來(lái)使用，運(yùn)用了CSS3技術(shù)，默認(rèn)支持PC端、移動(dòng)設(shè)備、PAD等設(shè)備，談不上漂亮，不過挺簡(jiǎn)潔，而且修飾為圓滑風(fēng)格，還帶陰影的立體感，這種風(fēng)格若使用傳統(tǒng)的CSS技術(shù)，需要借助圖片來(lái)實(shí)現(xiàn)，而在CSS3中，實(shí)現(xiàn)這些樣式都挺方便的。<!DOCTYPE html> <head> <title>C
CSS3設(shè)計(jì)一個(gè)簡(jiǎn)潔的用戶登錄界面，可作為網(wǎng)站后臺(tái)、用戶中心的登錄模板來(lái)使用，運(yùn)用了CSS3技術(shù)，默認(rèn)支持PC端、移動(dòng)設(shè)備、PAD等設(shè)備，談不上漂亮，不過挺簡(jiǎn)潔，而且修飾為圓滑風(fēng)格，還帶陰影的立體感，這種風(fēng)格若使用傳統(tǒng)的CSS技術(shù)，需要借助圖片來(lái)實(shí)現(xiàn)，而在CSS3中，實(shí)現(xiàn)這些樣式都挺方便的。
<!DOCTYPE html>
<head>
<title>CSS3登錄界面 </title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;outline: none;
}
body {
background: #4E0085;
}
form {
border: 1px solid #270644;
width: 250px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
margin:50px auto;
padding: 20px;
-moz-box-shadow:0px -5px 300px #270644;
-webkit-box-shadow:0px -5px 300px #270644;
}
label {
font-size: 12px;
font-family: arial, sans-serif;
list-style-type: none;
color: #fff;
text-shadow: #000 1px 1px;
margin-bottom: 10px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
}
input {
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
padding: 6px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-top: 1px solid #ad64e0;
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
margin-bottom: 10px;
background: #8a33c6;
width: 230px;
}
input.submit {
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
width: 100px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
color: #fff;
text-transform: uppercase;
text-shadow: #000 1px 1px;
border-top: 1px solid #ad64e0;
margin-top: 10px;
}
input.submit:hover {
-webkit-box-shadow: 0px 0px 2px #000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
}
</style>
</head>
<body>
<form action="">
<label>用戶名:</label>
<input type="text" name="username" />
<label>密 碼:</label>
<input type="password" name="password" />
<input type="submit" value="登錄" name="submit" class="submit" />
</form>
</body>
</html>