使用css3制作金属质感登录表单

要使用CSS3制作具有金属质感的登录表单，我们可以利用一些CSS3的特性，如渐变、阴影、边框和反射效果。以下是一个简单的示例，说明如何创建一个具有金属质感的登录表单：

1. HTML结构：

<div class="metal-form">
    <form>
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>
</div>

2. CSS样式：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.metal-form {
    width: 300px;
    padding: 20px;
    background: linear-gradient(45deg, #878787, #b6b6b6);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.metal-form input,
.metal-form button {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 4px;
    background: linear-gradient(45deg, #a9a9a9, #c0c0c0);
    color: #333;
    text-shadow: 1px 1px 0 #fff;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 
                0 1px 0 rgba(255, 255, 255, 0.5);
}

.metal-form button {
    background: linear-gradient(45deg, #808080, #a0a0a0);
    cursor: pointer;
    transition: all 0.3s;
}

.metal-form button:hover {
    background: linear-gradient(45deg, #707070, #909090);
}

.metal-form input:focus,
.metal-form button:focus {
    outline: none;
}

这个示例中，我们使用了线性渐变来模拟金属的质感，并为输入框和按钮添加了内阴影和外阴影。按钮在鼠标悬停时颜色会变深，以提供交互反馈。

你可以根据需要调整颜色、阴影和其他样式属性，以获得更逼真的金属效果或更符合你的设计需求。