css注册框制作
基本结构
HTML部分创建一个简单的表单结构，包含用户名、密码输入框和提交按钮：
<div class="register-container">
<h2>用户注册</h2>
<form>
<div class="input-group">
<input type="text" placeholder="用户名" required>
</div>
<div class="input-group">
<input type="password" placeholder="密码" required>
</div>
<button type="submit">注册</button>
</form>
</div>容器样式
设置注册框整体样式，包括宽度、背景、阴影和圆角：
.register-container {
width: 300px;
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}输入框样式
设计输入框的外观和交互效果：
.input-group {
margin-bottom: 15px;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.input-group input:focus {
border-color: #4285f4;
outline: none;
}按钮样式
创建吸引人的按钮样式，并添加悬停效果：
button {
width: 100%;
padding: 10px;
background-color: #4285f4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #3367d6;
}标题样式
为注册标题添加简单装饰：
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}响应式设计
添加媒体查询使注册框在不同屏幕尺寸下保持良好显示：
@media (max-width: 400px) {
.register-container {
width: 90%;
margin: 20px auto;
}
}动画效果
为输入框和按钮添加过渡动画：
.input-group input, button {
transition: all 0.3s ease;
}验证样式
为表单验证添加视觉反馈：
input:invalid {
border-color: #ff4444;
}
input:valid {
border-color: #00C851;
}
