【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属性的介绍,之前也有写过,可以看这篇 ~

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Observability:在 Elastic Stack 8.12 中使用 Elastic Agent 性能预设

作者&#xff1a;来自 Elastic Nima Rezainia, Bill Easton 8.12 中 Elastic Agent 性能有了重大改进 最新版本 8.12 标志着 Elastic Agent 和 Beats 调整方面的重大转变。 在此更新中&#xff0c;Elastic 引入了 Performance Presets&#xff0c;旨在简化用户的调整过程并增强…

MATLAB - 仿真单摆的周期性摆动

系列文章目录 前言 本例演示如何使用 Symbolic Math Toolbox™ 模拟单摆的运动。推导摆的运动方程&#xff0c;然后对小角度进行分析求解&#xff0c;对任意角度进行数值求解。 一、步骤 1&#xff1a;推导运动方程 摆是一个遵循微分方程的简单机械系统。摆最初静止在垂直位置…

力扣136、只出现一次的数字(简单)

1 题目描述 图1 题目描述 2 题目解读 在非空整数数组nums中&#xff0c;有一个元素只出现了一次&#xff0c;其余元素均出现两次。要求找出那个只出现一次的元素。 3 解法一&#xff1a;位运算 位运算&#xff0c;是一种非常简便的方法。 3.1 解题思路 异或运算&#xff0c;有…

《PCI Express体系结构导读》随记 —— 第II篇 第4章 PCIe总线概述(3)

接前一篇文章&#xff1a;《PCI Express体系结构导读》随记 —— 第II篇 第4章 PCIe总线概述&#xff08;2&#xff09; 4.1 PCIe总线的基础知识 与PCI总线不同&#xff0c;PCIe总线使用端到端的连接方式&#xff0c;在一条PCIe链路的两端只能各连接一个设备&#xff0c;这两个…

如何开立一个融资融券账户?

第一&#xff1a;什么是融资融券&#xff1f;融资融券交易&#xff0c;又称“证券信用交易”&#xff0c;是指投资者通过向具有融资融券业务资格的证券公司提供担保物&#xff0c;借入资金买入证券&#xff08;融资交易&#xff09;或借入证券并卖出&#xff08;融券交易&#…

【LeetCode: 25. K 个一组翻转链表 + 链表 + 递归】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

盲盒小程序开发,实现“双收益”

盲盒在我国是一个发展潜力较高的市场&#xff0c;盲盒具有的刺激和收藏价值&#xff0c;深受消费者的喜爱&#xff0c;盲盒的“隐藏款”机制&#xff0c;能够为消费者带来惊喜感。盲盒一般与影视动漫IP合作&#xff0c;推出盲盒商品&#xff0c;这也是深受年轻人追捧的一大特点…

Linux 系统服务

一、CentOS 6 与 CentOS 7开机流程 1.CentOS 6 1.1.打开电源首先通过内核引导开机。 1.2.开机自检&#xff0c;加载 BIOS 硬件信息。 1.3.MBR 记录一般是在磁盘0磁道0扇区&#xff0c;共512个字节。前446个字节是 BootLoder。计算机不知道我们的系统在哪里&#xff0c;所以需…

医用机器人市场调研:预计2029年将达到37亿美元

我国医护人员缺口大、居民医疗资源的需求持续增加&#xff0c;医用机器人的普及是良好的解决方案&#xff0c;换而言之&#xff0c;我国医疗资源紧缺问题为医用机器人市场孕育了增长空间。 医用机器人&#xff0c;是指用于医院、诊所的医疗或辅助医疗的机器人。是一种智能型…

如何克服AI部署中面临的挑战

你可能听说过这样一个统计数据&#xff1a;超过 80% 的人工智能&#xff08;AI&#xff09;项目未能成功部署。虽然我们预计未来几年这一数字会有所下降&#xff0c;但与此同时&#xff0c;企业依然拥有非常现实和常见的成功障碍。缺乏高质量的数据、缺乏技术专长、企业内部难以…

OceanBase与新加坡南洋理工大学合作,推进机器学习与数据库技术融合

1月31日&#xff0c;OceanBase和新加坡南洋理工大学&#xff08;以下简称“南洋理工大学”&#xff09;签署合作协议&#xff0c;探索数据库智能化的技术创新。合作将以OceanBase 4.0 小鱼&#xff08;Paetica&#xff09;为研究基础&#xff0c;推进机器学习与数据库技术融合。…

【体验有奖】5 分钟函数计算部署 AI 艺术字应用,晒姓氏头像赢 Cherry 键盘!

作者&#xff1a;姜曦&#xff08;筱姜&#xff09; 目前&#xff0c;大多数开发者使用的 AI 绘画项目 Stable Diffusion WebUI 难以适应企业多用户、多场景的复杂需求&#xff0c;用户急需一套成熟解决方案去进行基于 Stable Diffusion 的 AI 绘画创业&#xff0c;本实验基于…