正文

轻松掌握：如何给HTML表单添加圆润边框，提升页面美感

/0 浏览量
0411

在现代网页设计中，表单是用户与网站互动的重要方式。一个设计精美的表单不仅能够提升用户体验，还能为页面增添美感。在这篇文章中，我将带你轻松掌握如何给HTML表单添加圆润边框，让你的网页焕然一新。

选择合适的CSS属性

要给HTML表单添加圆润边框，我们需要使用CSS的相关属性。最常用的属性是 border-radius，它允许你指定边框的圆角大小。

基本示例

以下是一个简单的HTML表单示例，我们将在此基础上添加圆润边框。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="登录">
</form>

添加CSS样式

接下来，我们为这个表单添加一些CSS样式，使其边框变得圆润。

form {
  border: 1px solid #ccc; /* 设置边框样式 */
  padding: 20px; /* 设置内边距 */
  border-radius: 10px; /* 设置边框圆角为10像素 */
}

input[type="text"],
input[type="password"] {
  border: 1px solid #ccc; /* 设置边框样式 */
  border-radius: 5px; /* 设置边框圆角为5像素 */
  padding: 10px; /* 设置内边距 */
  margin-bottom: 10px; /* 设置底部外边距 */
}

input[type="submit"] {
  border: none; /* 移除边框 */
  background-color: #007bff; /* 设置背景颜色 */
  color: white; /* 设置文字颜色 */
  padding: 10px 20px; /* 设置内边距 */
  border-radius: 5px; /* 设置边框圆角为5像素 */
  cursor: pointer; /* 设置鼠标样式为指针 */
}

完整代码示例

将HTML和CSS代码结合起来，你将得到以下完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单示例</title>
<style>
form {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

input[type="text"],
input[type="password"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

input[type="submit"] {
  border: none;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
</head>
<body>

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="登录">
</form>

</body>
</html>

通过以上步骤，你就可以轻松地给HTML表单添加圆润边框，让你的网页看起来更加美观大方。希望这篇文章能够帮助你提升网页设计水平。

-- 展开阅读全文 --