【css】设置渐变阴影

在这里插入图片描述
css的属性中没有直接设置渐变阴影的,但是可以通过伪元素去实现。

.box-wrap{
  width: 100%;
  display: grid;
  place-content: center;
}
.box {
  width: 150px;
  height: 150px;
  background: #eee;
  border: 1px solid #585252;
  position: relative;
  transform: translate(0);/* 元素不进行位移,处于原始位置 */
  transform-style: preserve-3d;/* 进行3D变换时保留元素的z-index属性 */
}
.shadow::before {
  content: '';
  position: absolute;
  inset: -2px;/* 设置伪元素的内边距,使元素向内缩小2px*/
  transform: translate3d(4px,3px,-2px);/* 3D变换 (X, Y, Z) */
  filter: blur(10px);/* 设置模糊效果,模糊半径为10px */
}
    <div class="box-wrap">
      <div class="box shadow"></div>
    </div>

关于filter属性的介绍,之前也有写过,可以看这篇 ~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/358737.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读,Domain Specific ML Prefetcher for Accelerating Graph Analytics(一)

目录 一、Article:文献出处&#xff08;方便再次搜索&#xff09; &#xff08;1&#xff09;作者 &#xff08;2&#xff09;文献题目 &#xff08;3&#xff09;文献时间 &#xff08;4&#xff09;引用 二、Data:文献数据&#xff08;总结归纳&#xff0c;方便理解&am…

微调入门篇:大模型微调的理论学习

1、为什么大模型微调 之前在《大模型这块蛋糕,想吃吗》介绍了普通人如何搭上大模型这块列车, 其中有一个就是模型微调,这个也是未来很多IT公司需要发力的方向,以及在《垂直领域大模型的应用更亲民》中论述了为什么微调适合大家,以及微调有什么价值? 作为小程序猿在开始进行微…

Mac截图软件CleanShot X为什么不能识别文字?CleanShot X文字识别教程

好多朋友在使用CleanShot X for Mac截图软件过程中发现不能进行OCR文字识别&#xff1f;其实这是因为你没有给CleanShot X相应的权限导致的&#xff0c;具体操作如下&#xff1a; 第一步、打开&#xff0c;系统偏好设置-隐私与安全设置-完全磁盘访问权限 点击左下方➕ 在应用程…

能替代微软AD的国产化方案,搭建自主可控的身份管理体系

随着国产化替代步伐加速&#xff0c;以及企业出于信息安全建设的需要&#xff0c;越来越多的企业和组织开始考虑将现有的微软 Active Directory&#xff08;AD&#xff09;替换为国产化的LDAP身份目录服务&#xff08;也称统一身份认证和管理&#xff09;系统。本文将介绍一种国…

App测试中ios和Android有哪些区别呢?

App测试中&#xff0c;大家最常问到的问题就是&#xff1a;ios和 Android有什么区别呢&#xff1f; 在Android端&#xff0c;我们经常会使用 JavaScript、 HTML、 CSS等技术来编写一些简单的 UI界面。而 iOS端&#xff0c;我们经常会使用到 UI设计、界面布局、代码结构、 API等…

【经典项目】Java入门,实现斗地主小游戏

一、需求分析 实现斗地主游戏可以涉及以下几个关键步骤和思路&#xff1a; 游戏规则定义&#xff1a;首先&#xff0c;你需要明确斗地主游戏的规则&#xff0c;包括牌的花色和大小、玩家数量、发牌顺序、出牌规则、胜利条件等。 牌的表示和初始化&#xff1a;定义一套扑克牌的…

AtCoder Beginner Contest 338F - Negative Traveling Salesman【floyd+状态压缩dp】

原题链接&#xff1a;https://atcoder.jp/contests/abc338/tasks/abc338_f Time Limit: 6 sec / Memory Limit: 1024 MB Score: 500 points、 问题陈述 有一个有N个顶点和M条边的加权简单有向图。顶点的编号为 1 到 N&#xff0c;i/th 边的权重为 Wi​&#xff0c;从顶点 U…

十年创业记-01-草根搭上时代快车

十年创业的点点滴滴&#xff0c;记录起步、发展到壮大的过程&#xff0c;有失败的教训&#xff0c;有成功的经验&#xff0c;也有一些建议&#xff0c;与君共勉。 今年35岁&#xff0c;创业的第九年&#xff0c;坐标十八线小城市&#xff0c;软件外包行业。从2015年20万的营业额…

GWIT 和GWFI

关于燃烧的历史&#xff1a; -UL request needle flame (open fire) test to rate flammability per UL-94 Vxx UL 要求针焰&#xff08;明火&#xff09;试验以评定UL-94的易燃性。 - industry recognized that glowing wires ( caused by electrical overload) may put …

SQL注入攻击 - 基于布尔的盲注

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 查看靶场详情:SQL Injections 一、判定是否有注入点 以下是一个常见的步骤: 在URL中尝试输入特殊字符,如: " \ -- 等,并观察页面返回的内容。在URL中尝试输入错误的…

[k8s系列]:kubernetes·概念入门

文章目录 序言1 kubernetes概述1.1 kubernetes解决的问题1.1.1 部署方式的演变1.1.2 容器化部署——容器编排问题 1.2 kubernetes组件1.2.1 kubernetes组件调用关系1.2.2 调用逻辑示例 序言 序言&#xff1a;本文将从&#xff0c;第一节&#xff1a;kubernetes解决的问题、组件…

c语言 -文件操作-详解

目录 1.为什么使用文件&#xff1f; 2.什么是文件&#xff1f; 2.1程序文件 2.2数据文件 2.3文件名 3.⼆进制⽂件和⽂本⽂件&#xff1f; 测试 4. ⽂件的打开和关闭 4.1 流和标准流 4.1.1 流 4.1.2 标准流 4.2 ⽂件指针 4.3文件的打开和关闭 4.3.1熟悉了解⽂件的打…

Linux:进程信号

文章目录 信号的概念实践信号关于前台和后台进程的操作 操作系统与外设信号的产生 前面的篇章结束了信号量的话题&#xff0c;那么接下来引入的是信号的话题&#xff0c;信号和信号量之间没有任何关系&#xff0c;只是名字比较像 信号的概念 在生活中存在各种各样的信号&…

现代C++之万能引用、完美转发、引用折叠FrancisFrancis

转载&#xff1a;现代C之万能引用、完美转发、引用折叠 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/99524127 后期参考(还未整合)&#xff1a;C 完美转发深度解析:从入门到精通_c完美转发-CSDN博客https://blog.csdn.net/qq_21438461/article/details/129938466 0.导语 …

【数据结构 05】双链表

一、原理 双链表又称双向链表&#xff0c;通常情况下是带头循环结构&#xff0c;在CSTL标准模板库中封装的<list.h>头文件就是带头双向循环链表。 特性&#xff1a;增删灵活且高效&#xff0c;支持随机增删但不支持随机访问 设计思路&#xff1a; 链表包含一个头节点h…

如何提高工业数据采集的效率和准确性-天拓四方

随着工业4.0和智能制造的兴起&#xff0c;工业数据采集的重要性日益凸显。通过数据采集&#xff0c;企业能够实时监控生产过程&#xff0c;优化资源配置&#xff0c;提高生产效率。在实时监控、生产优化、质量控制等方面&#xff0c;有效的数据采集系统能够为企业提供宝贵的洞察…

Pinely Round 2 F. Divide, XOR, and Conquer

F. Divide, XOR, and Conquer 题意 给定一个非负整数数组 a a a&#xff0c;定义操作&#xff1a; 对于区间 [ l , r ] [l,r] [l,r]&#xff0c;选择一个分界点 l ≤ k < r l \leq k < r l≤k<r&#xff0c;将其分成 [ l , k ] [l,k] [l,k] 和 [ k 1 , r ] [k…

系统架构设计师教程(十六)嵌入式系统架构设计理论与实践

嵌入式系统架构设计理论与实践 16.1 嵌入式系统概述16.1.1 嵌入式系统发展历程16.1.2 嵌人式系统硬件体系结构16.2 嵌入式系统软件架构原理与特征16.2.1 两种典型的嵌入式系统架构模式16.2.2 嵌入式操作系统16.2.3 嵌入式数据库16.2.4 嵌入式中间件16.2.5 嵌入式系统软件开发环…

[GN] 设计模式—— 创建型模式

文章目录 创建型模式单例模式 -- 确保对象唯一性例子优化饿汉式懒汉式 优缺点使用场景 简单工厂模式例子&#xff1a;优化优缺点适用场景 工厂方法模式 -- 多态工厂的实现例子优缺点优化适用场景 抽象工厂模式 -- 产品族的创建例子优缺点适用场景 总结 创建型模式 单例模式 –…

嵌入式系统设计师之任务管理

目录 一、任务划分(II) 二、任务控制块&#xff08;TCB)(II) 三、任务的状态及状态转换(II) 四、任务队列(II) 五、任务管理机制(II) 六、任务调度(II) 6.1 调度时机 6.2 调度方式 6.3 调度算法性能指标和分类 6.4 任务调度算法&#xff08;II) 1、先来…