CSS3 登錄背景
CSS3 是 CSS 的第三個版本,于 2012 年發布。它是用于構建 Web 頁面和交互式系統的技術,包括樣式、布局、動畫和動畫效果等。在 CSS3 中,我們引入了一些新的技術和特性,例如偽元素、媒體查詢、選擇器、動畫和背景等。
CSS3 登錄背景是一種用于裝飾 Web 頁面的背景,可以使網站更加美觀和易于使用。登錄背景通常包括一個背景圖像和一個登錄框,用戶可以在登錄框中輸入個人信息并提交表單。
下面是一個簡單的 CSS3 登錄背景的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 登錄背景</title>
<style>
body {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
#login-box {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
padding: 20px;
width: 300px;
text-align: center;
font-size: 24px;
#login-box input[type="text"], #login-box input[type="password"] {
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
font-size: 16px;
#login-box input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
#login-box input[type="submit"]:hover {
background-color: #3e8e41;
</style>
</head>
<body>
<div id="login-box">
<h1>Login</h1>
<form id="login-form">
<input type="text" placeholder="Username" name="username" required>
<input type="password" placeholder="Password" name="password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
使用 CSS3 登錄背景可以使網站更加美觀和易于使用,特別是在 Web 開發中,已經成為了一種常見的設計模式。