数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用CSS创建渐变阴影？
随着网络的发展，制作精美的UI是提高网站用户参与度的最重要工作之一。改进前端外观和感觉的方法之一是在CSS中应用渐变阴影。应用渐变阴影最重要的两种方法是线性渐变和径向渐变。
渐变阴影可用于吸引用户注意特定信息、应用悬停或焦点效果，或为网站提供Web3外观和感觉。在本教程中，我们将通过实践示例分析这两种渐变阴影。
我们将利用两个重要的CSS概念来实现此效果，一个是`filter`属性，另一个是`::after`伪类。伪类将用于创建虚假的背景，而`filter`属性将用于对周围背景应用模糊效果。
方法一：线性渐变阴影
在这个例子中，我们将了解如何在卡片上应用线性渐变阴影效果。
语法
.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：向伪类添加一个小`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>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>
方法二：径向渐变阴影
在这个例子中，我们将了解如何在同一卡片效果上应用径向渐变阴影效果，并观察变化。
语法
.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>
结论
径向渐变颜色起源于标签的中心，从上面的例子可以看出，黄色完全被黑色背景覆盖，而红色的一些痕迹出现在卡片侧面的中点。另一方面，在线性渐变中，没有观察到重叠，因为它根据提供的方向沿所有侧边均匀分布所有颜色。
我们还可以调整`inset`和`blur`的值来增加或减少渐变效果所包含的区域。值越负，渐变越明显；`blur`值使效果在侧面更加分散。
911 次浏览
