CSS 如何创建渐变阴影

随着Web的发展，创建漂亮的用户界面是增加网站用户参与度的最重要任务之一。一种改善前端外观的方法是在CSS中应用渐变阴影。应用渐变阴影的两种重要方式是线性渐变和径向渐变。

渐变阴影可用于吸引用户对特定信息的注意，应用悬停或焦点效果，或为网站提供Web3式的外观和感觉。在本教程中，我们将通过实例来分析这两种渐变阴影。

我们将利用两个重要的CSS概念来实现效果，一个是filter属性，另一个是::after伪类。伪类将用于创建一个虚拟背景，而filter属性将用于对周围背景应用模糊效果。

方法1：线性渐变阴影

在这个例子中，我们将看到如何将线性渐变阴影效果应用于一个卡片上。

语法

.classname::after{  
    background: linear-gradient(direction, color1, [color2, color3.......]);
    inset: -0.5rem;
    filter: blur(25px);
    .......
}

在这里，classname是指分配给给定标签的类别，direction属性表示颜色的线性排列应该按照哪个方向布局。可以使用‘deg’或使用预定义字符串如‘to right’来提供。

步骤

步骤1 ：创建网站的HTML文档骨架，并为需要渐变效果的标签分配一个类名。

步骤2 ：使用与分配给标签的类名相同的::after伪类。

步骤3 ：使用linear-gradient() CSS函数为伪类的背景填充所需的渐变颜色。

步骤4 ：为了确保伪类永远不会叠加在原始类上，为伪类添加z-index属性，其值低于分配给原始类的值。

步骤5 ：为伪类添加一小部分插入属性，以便原始类不完全覆盖背景。

步骤6 ：最后，为伪类应用渐变阴影效果，将模糊应用于伪组件。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linear Gradient Shadow</title>
</head>
<body>
    <div class="gradient">
        <h1>Welcome to Tutorials Point</h1>
    </div>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .gradient{
            margin-top: 20px;
            margin-left: 5%;
            width: 90%;
            position: relative;
            border-radius: 10px;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-right: 10px;
            padding-left: 10px;
            background-color: black;
        }
        h1{
            color: white;
            text-align: center;
        }
        .gradient::after{
            content: "";
            position: absolute;
            z-index: -100;
            background: linear-gradient(to right, blue, cyan,lime,  green, yellow, orange, red);
            inset: -0.5rem;
            filter: blur(25px);
        }
    </style>
</body>
</html>

方法2：径向渐变阴影

在这个例子中，我们将看到如何将径向渐变阴影效果应用于相同的卡片效果，并观察变化。

语法

.classname::after{  
    background: radial-gradient(color1, [color2, color3.......]);
    inset: -0.5rem;
    filter: blur(25px);
    .......
}

步骤

步骤1 : 创建网站的HTML文档框架，并将需要渐变效果的标签分配一个类名。

步骤2 : 使用与分配给标签的类名相同的::after伪类。

步骤3 : 使用radial-gradient() CSS函数将伪类的背景填充为所需的渐变颜色。

步骤4 : 为了确保伪类永远不会覆盖在原始类上面，添加z-index属性到伪类中，其值低于分配给原始类的值。

步骤5 : 向伪类添加一个小的inset属性，以确保原始类不会完全覆盖背景。

步骤6 : 最后，通过对伪类应用模糊效果来应用渐变阴影效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radial Gradient Shadow</title>
</head>
<body>
    <div class="gradient">
        <h1>Welcome to Tutorials Point</h1>
    </div>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .gradient{
            margin-top: 20px;
            margin-left: 5%;
            width: 90%;
            position: relative;
            padding-top: 50px;
            padding-bottom: 50px;
            border-radius: 10px;
            padding-right: 10px;
            padding-left: 10px;
            background-color: black;
        }
        h1{
            color: white;
            text-align: center;
        }
        .gradient::after{
            content: "";
            position: absolute;
            z-index: -100;
            background: radial-gradient(yellow, red, blue);
            inset: -1rem;
            filter: blur(10px);
        }
    </style>
</body>
</html>