表单容器

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 51 课，共 76 课。

挑战

简单

在这一课中，我们将让表单看起来更有条理，也更美观。

按照以下步骤操作：

为表单容器应用样式，让它更加醒目。编写一条 CSS 规则，选择类为 login-form 的元素。
1. 设置背景颜色（白色或任何好看的颜色）。
2. 添加内边距，让内容周围留出空间。
3. 将边角设为圆角。
4. 应用 box-shadow，营造柔和的悬浮效果。
5. 在表单周围添加边框（颜色和粗细不限）。
使用 text-align 属性将表单内的文本居中。

亲手试试

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>