CSS input密码样式|极客教程

CSS input密码样式

在web开发中，经常会涉及到密码输入框的设计，为了保障用户的隐私安全，输入密码时会显示为掩码形式，而不是明文显示。通过CSS样式，我们可以自定义密码输入框的外观，使其更加美观和符合我们的设计需求。

下面我们将介绍几种常见的密码输入框样式，并用代码演示实现效果。

基本的密码输入框样式

首先，让我们先创建一个基本的密码输入框，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Input Style</title>
<style>
    .password {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 200px;
    }
</style>
</head>
<body>
    <input type="password" class="password" placeholder="Enter your password">
</body>
</html>

在上面的代码中，我们创建了一个简单的密码输入框，使用了一个类名为password的样式来设置输入框的边框和圆角边框。

自定义密码输入框样式

接下来，我们来实现一些自定义的密码输入框样式，让密码输入框看起来更加炫酷。

圆角输入框

我们可以给密码输入框添加圆角边框，代码如下：

<style>
    .password {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 20px;
        width: 200px;
    }
</style>

阴影效果

我们还可以给密码输入框添加一些阴影效果，代码如下：

<style>
    .password {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 200px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
</style>

渐变背景

我们还可以给密码输入框添加有渐变背景色，代码如下：

<style>
    .password {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 200px;
        background: linear-gradient(45deg, #ff9a9e, #fad0c4);
    }
</style>