写一段使用css美化html表单的代码

以下是一个简单的例子来演示如何使用CSS美化HTML表单：

HTML代码：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" required>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">提交</button>
</form>

CSS代码：

form {
  display: flex;  /* 使用Flexbox布局 */
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

label {
  font-size: 18px;
  font-weight: bold;
}

input {
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin: 10px 0;
  width: 100%;
}

button {
  background-color: #2ecc71;
  color: #fff;
  border: none;
  padding: 10px 25px;
  border-radius: 5px;
  font-size: 18px;
  margin-top: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #27ae60;
}

上述代码将会美化表单，使其更具吸引力和易于使用。其中，Flexbox布局被用来使表单的元素居中显示，并且输入框和提交按钮都有一些圆角和填充。此外，提交按钮还有一个鼠标悬停效果，当鼠标悬停在按钮上时，背景色会变成较深的绿色。