当前位置： 首页 > news >正文

如何使用CSS创建渐变阴影？

news 2025/12/26 23:26:35

随着网络的不断发展，制作漂亮的 UI 是提高客户在网站上的参与度的最重要的工作之一。改善前端外观的方法之一是在 CSS 中应用渐变阴影。应用渐变阴影的两种最重要的方法是线性渐变和径向渐变。

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

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

方法一：线性渐变阴影

在此示例中，我们将了解如何在卡片上应用线性渐变阴影效果。

语法

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

 

其中，classname 是指分配给给定标签的类，direction 属性表示颜色的线性排列应沿哪个方向排列。这可以以“deg”形式提供，也可以使用预先设计的字符串（例如“to right”）。

算法

第一步：创建网站的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);.......
}

 

算法

第一步：创建网站的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 的值来增加或减少渐变效果所覆盖的区域。负值越大，渐变就越突出，而模糊值则使效果在两侧更加分散。

相关文章：

如何使用CSS创建渐变阴影？

随着网络的不断发展&#xff0c;制作漂亮的 UI 是提高客户在网站上的参与度的最重要的工作之一。改善前端外观的方法之一是在 CSS 中应用渐变阴影。应用渐变阴影的两种最重要的方法是线性渐变和径向渐变。 渐变阴影可用于吸引用户对特定信息的注意力&#xff0c;应用悬停或焦点…...

编程日记 2023/8/29 9:44:00

perl send HTTP Request

perl send HTTP Request 使用Perl进行发送HttP请求 use LWP::UserAgent; use HTTP::Request; use HTTP::Headers; use JSON::PP;my $test_url "htttp://127.0.0.1:8080/update/";sub sendHttp{my $user_agent LWP::UserAgent->new(timeout>60);my ($url, $…...

编程日记 2023/8/29 9:42:58

阿里云CDN缓存预热与刷新以及常见的故障汇总

文章目录 1.为CDN缓存的文件增加过期时间2.CDN缓存预热配置3.CDN缓存刷新配置4.常见故障 CDN缓存预热指的是主动将要缓存的文件推送到全国各地的CDN边缘加速器上&#xff0c;减少回源率&#xff0c;提供命中率。 缓存刷新指的是后期上传了同名的文件&#xff0c;之前的缓存已经…...

编程日记 2023/8/29 9:41:57

Oracle创建控制列表ACL（Access Control List）

Oracle创建控制列表ACL&#xff08;Access Control List&#xff09; Oracle ACL简介一、先登陆163邮箱设置开启SMTP。二、Oracle ACL控制列表处理&#xff08;一&#xff09;创建ACL&#xff08;create_acl&#xff09;&#xff08;二&#xff09;添加ACL权限&#xff08;add_…...

编程日记 2023/8/29 9:40:56

3D模型转换工具HOOPS Exchange助力打造虚拟现实应用程序

挑战&#xff1a; 支持使用各种 CAD 系统和 CAD 文件格式的客户群向可视化硬件提供快速、准确的数据加载提供对详细模型信息的访问&#xff0c;同时确保高帧率性能 解决方案&#xff1a; HOOPS Exchange领先的CAD数据转换工具包 结果&#xff1a; 确保支持来自领先工程软件…...

编程日记 2023/8/29 9:39:54

python web GUI框架-NiceGUI 教程（二）

python web GUI框架-NiceGUI 教程&#xff08;二&#xff09; streamlit可以在一些简单的场景下仍然推荐使用&#xff0c;但是streamlit实在不灵活&#xff0c;受限于它的核心机制&#xff0c;NiceGUI是一个灵活的web框架&#xff0c;可以做web网站也可以打包成独立的exe。 基…...

编程日记 2023/8/29 9:38:53

RT_Thread内核机制学习（二）

对于RTT来说&#xff0c;每个线程创建时都自带一个定时器 rt_err_t rt_thread_sleep(rt_tick_t tick) {register rt_base_t temp;struct rt_thread *thread;/* set to current thread */thread rt_thread_self();RT_ASSERT(thread ! RT_NULL);RT_ASSERT(rt_object_get_type(…...

编程日记 2023/8/29 9:37:52

线性代数的学习和整理12: 矩阵与行列式，计算上的差别对比

目录 1 行列式和矩阵的比较 2 简单总结矩阵与行列式的不同 3 加减乘除的不同 3.1 加法不同 3.2 减法不同 3.3 标量乘法/数乘 3.3.1 标准的数乘对比 3.3.2 数乘的扩展 3.4 乘法 4 初等线性变换的不同 4.1 对矩阵进行线性变换 4.2 对行列式进行线性变换 1 行列式和…...

编程日记 2023/8/29 9:36:51

2023年MySQL核心技术面试第一篇

目录 一 . 存储&#xff1a;一个完整的数据存储过程是怎样的&#xff1f; 1.1 数据存储过程 1.1.1 创建MySQl 数据库 1.1.1.1 为什么我们要先创建一个数据库&#xff0c;而不是直接创建数据表&#xff1f; 1.1.1.2基本操作部分 1.2 选择索引问题 二 . 字段&#xff1a;这么多的…...

编程日记 2023/8/29 9:35:50

linux启动jar 缺失lib

linux启动jar包时&#xff0c;找不到报错 [rootebs-141185 xl-admin]# java -Djava.library.path/home/kabangke/xl-admin/lib -jar /home/kabangke/xl-admin/xl-admin.jar Exception in thread "main" java.lang.NoClassDefFoundError: org/springframework/web/se…...

编程日记 2023/8/29 9:34:49

【Bash】常用命令总结

文章目录 1. 文件查询1.1 查看文件夹内&#xff08;包含子文件夹&#xff09;文件数量1.2 查看文件夹大小 任务简介&#xff1a; 对bash常用命令进行总结。 任务说明&#xff1a; 对平时工作中使用bash的相关命令做一个记录和说明&#xff0c;方便以后查阅。 1. 文件查询 1.…...

编程日记 2023/8/29 9:33:48

小研究 - Java虚拟机性能及关键技术分析

利用specJVM98和Java Grande Forum Benchmark suite Benchmark集合对SJVM、IntelORP,Kaffe3种Java虚拟机进行系统测试。在对测试结果进行系统分析的基础上&#xff0c;比较了不同JVM实现对性能的影响和JVM中关键模块对JVM性能的影响&#xff0c;并提出了提高JVM性能的一些展望。…...

编程日记 2023/8/29 9:32:46

Repo manifests默认default.xml清单文件中的各个标签详解

Repo简介 “Repo” 是一个用于管理多个Git存储库的工具&#xff0c;通常与Google的Android开发项目一起使用。它允许您在一个命令下轻松地进行多个Git存储库的同步、下载和管理。 repo下载安装 从清华镜像源下载 mkdir ~/bin PATH~/bin:$PATH curl https://mirrors.tun…...

编程日记 2023/8/29 9:31:45

javacv基础02-调用本机摄像头并预览摄像头图像画面视频

引入架包&#xff1a; <dependency><groupId>org.openpnp</groupId><artifactId>opencv</artifactId><version>4.5.5-1</version></dependency><dependency><groupId>org.bytedeco</groupId><artifactId…...

编程日记 2023/8/29 9:30:44

【Nginx21】Nginx学习：FastCGI模块（三）缓冲区与响应头

Nginx学习&#xff1a;FastCGI模块&#xff08;三&#xff09;缓冲区与响应头 缓存相关的内容占了 FastCGI 模块将近一小半的内容&#xff0c;当然&#xff0c;用过的人可能不多。而今天的内容说实话&#xff0c;我平常也没怎么用过。第一个是缓冲区相关的知识&#xff0c;其实…...

编程日记 2023/8/29 9:29:43

正则表达式（常用字符简单版）

量词 字符类 边界匹配 分组和捕获 特殊字符 字符匹配 普通字符&#xff1a;普通字符按照字面意义进行匹配&#xff0c;例如匹配字母 "a" 将匹配到文本中的 "a" 字符。元字符&#xff1a;元字符具有特殊的含义&#xff0c;例如 \d 匹配任意数字字符&#xf…...

编程日记 2023/8/29 9:28:42

从零开始学习Python爬虫：详细指南

导言&#xff1a; 随着互联网的迅速发展&#xff0c;大量的数据可供我们利用。而Python作为一种简单易学且功能强大的编程语言&#xff0c;被广泛应用于数据分析和处理。学习Python爬虫技术&#xff0c;能够帮助我们从互联网上获取数据&#xff0c;并进行有效地分析和利用。本文…...

编程日记 2023/8/29 9:27:41

分布式计算框架：Spark、Dask、Ray

目录 什么是分布式计算 分布式计算哪家强&#xff1a;Spark、Dask、Ray 2 选择正确的框架 2.1 Spark 2.2 Dask 2.3 Ray 什么是分布式计算 分布式计算是一种计算方法&#xff0c;和集中式计算是相对的。 随着计算技术的发展&#xff0c;有些应用需要非常巨大的计算能力才…...

编程日记 2023/8/29 9:26:39

什么是伪类链（Pseudo-class Chaining）？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Pseudo-class Chaining⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚…...

编程日记 2023/8/29 9:25:38

每日一题：leetcode 57 插入区间

给你一个 无重叠的 &#xff0c;按照区间起始端点排序的区间列表。 在列表中插入一个新的区间&#xff0c;你需要确保列表中的区间仍然有序且不重叠&#xff08;如果有必要的话&#xff0c;可以合并区间&#xff09;。 示例 1&#xff1a; 输入&#xff1a;intervals [[1,3…...

编程日记 2023/8/29 9:24:35

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/23 13:54:23

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/12/10 16:19:48

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/12/14 4:42:07

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/12/22 2:26:24

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2025/12/25 14:07:20

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/10/15 8:34:59