html登陆注册界面 边框设置
时间: 2024-10-15 12:02:11 浏览: 8
HTML登录注册界面的边框设置通常涉及到CSS样式的应用。你可以通过`border`属性来控制边框的样式、宽度、颜色等。下面是一个基本示例:
```html
<!-- 登录表单 -->
<form id="loginForm">
<input type="text" placeholder="用户名" class="form-input" />
<input type="password" placeholder="密码" class="form-input" />
<button type="submit">登录</button>
</form>
<!-- 注册表单 -->
<form id="registerForm">
<input type="text" placeholder="邮箱" class="form-input" />
<input type="password" placeholder="密码" class="form-input" />
<input type="password" placeholder="确认密码" class="form-input" />
<button type="submit">注册</button>
</form>
/* CSS样式 */
.form-input {
border: 1px solid #ccc; /* 单线边框,灰色 */
border-radius: 4px; /* 圆角效果 */
padding: 8px;
margin-bottom: 10px;
}
/* 可选:添加焦点状态边框变化 */
.form-input:focus {
outline: none; /* 消除默认聚焦高亮 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 添加蓝色阴影效果 */
}
```
在这个例子中,`.form-input`类设置了所有输入框的基本边框样式。如果你想自定义边框样式,如虚线、实线加内阴影等,可以修改`border`的值和相关的CSS属性。
阅读全文