登录表单通过Flexbox居中布局，设置宽度320px、白色背景、圆角和阴影；输入框统一风格，聚焦时边框变蓝并有光晕效果；按钮蓝色渐变，悬停加深颜色；适配移动端，添加链接提升体验。
要实现一个美观的登录表单样式，css 可以用来控制布局、颜色、边框、阴影和交互效果。下面是一个实用且常见的登录表单样式实现方式。
1. 基础结构与居中布局
使用 Flexbox 将表单居中显示在页面中央，提升视觉体验。
<form class="login-form"> <h2>登录</h2> <input type="text" placeholder="用户名" required> <input type="password" placeholder="密码" required> <button type="submit">登录</button> </form>
CSS 设置容器居中：
body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f4f6f9; }
2. 表单样式美化
设置表单宽度、背景色、圆角、阴影，增强立体感。
立即学习“前端免费学习笔记（深入）”；
.login-form { width: 320px; padding: 30px; background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .login-form h2 { margin: 0 0 20px; text-align: center; color: #333; font-size: 24px; }
3. 输入框与按钮样式
.login-form input { width: 100%; padding: 12px; margin-bottom: 16px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; font-size: 14px; } .login-form input:focus { border-color: #4a90e2; outline: none; box-shadow: 0 0 5px rgba(74, 144, 226, 0.3); }
按钮样式突出，增加点击反馈：
.login-form button { width: 100%; padding: 12px; background-color: #4a90e2; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background 0.3s; } .login-form button:hover { background-color: #3a7bc8; }
4. 响应式与细节优化
适配小屏幕，避免在移动设备上显示异常。
@media (max-width: 480px) { .login-form { width: 90%; padding: 20px; } }
可选：添加“记住我”或“忘记密码”链接提升用户体验。
.login-form .extra-links { text-align: right; font-size: 14px; } .login-form .extra-links a { color: #4a90e2; text-decoration: none; } .login-form .extra-links a:hover { text-decoration: underline; }
基本上就这些。通过合理的 CSS 设计，可以让登录表单看起来专业又友好。关键是注重对齐、留白和交互反馈。