94款超级漂亮的box-shadow样式 复制即用

简介: 94款超级漂亮的box-shadow样式 复制即用

样式如图,代码已在结尾,按照序号复制粘贴便可直接用了:

6d7ac74aec354ecd93363606bdd10174.png

代码:

box-shadow #0 css code ====> box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
box-shadow #1 css code ====> box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
box-shadow #2 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
box-shadow #3 css code ====> box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
box-shadow #4 css code ====> box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
box-shadow #5 css code ====> box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
box-shadow #6 css code ====> box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
box-shadow #7 css code ====> box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
box-shadow #8 css code ====> box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
box-shadow #9 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
box-shadow #10 css code ====> box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
box-shadow #11 css code ====> box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
box-shadow #12 css code ====> box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
box-shadow #13 css code ====> box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
box-shadow #14 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
box-shadow #15 css code ====> box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
box-shadow #16 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
box-shadow #17 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
box-shadow #18 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
box-shadow #19 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
box-shadow #20 css code ====> box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
box-shadow #21 css code ====> box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
box-shadow #22 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
box-shadow #23 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
box-shadow #24 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow #25 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
box-shadow #26 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
box-shadow #27 css code ====> box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
box-shadow #28 css code ====> box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
box-shadow #29 css code ====> box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
box-shadow #30 css code ====> box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
box-shadow #31 css code ====> box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
box-shadow #32 css code ====> box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
box-shadow #33 css code ====> box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
box-shadow #34 css code ====> box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
box-shadow #35 css code ====> box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
box-shadow #36 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
box-shadow #37 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
box-shadow #38 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
box-shadow #39 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
box-shadow #40 css code ====> box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
box-shadow #41 css code ====> box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
box-shadow #42 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
box-shadow #43 css code ====> box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
box-shadow #44 css code ====> box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
box-shadow #45 css code ====> box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
box-shadow #46 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
box-shadow #47 css code ====> box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
box-shadow #48 css code ====> box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
box-shadow #49 css code ====> box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
box-shadow #50 css code ====> box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
box-shadow #51 css code ====> box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
box-shadow #52 css code ====> box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
box-shadow #53 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow #54 css code ====> box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
box-shadow #55 css code ====> box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
box-shadow #56 css code ====> box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
box-shadow #57 css code ====> box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
box-shadow #58 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
box-shadow #59 css code ====> box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
box-shadow #60 css code ====> box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px; border-radius: 0px;
box-shadow #61 css code ====> box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px; border-radius: 0px;
box-shadow #62 css code ====> box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
box-shadow #63 css code ====> box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
box-shadow #64 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
box-shadow #65 css code ====> box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
box-shadow #66 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
box-shadow #67 css code ====> box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
box-shadow #68 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
box-shadow #69 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
box-shadow #70 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
box-shadow #71 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
box-shadow #72 css code ====> box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
box-shadow #73 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
box-shadow #74 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
box-shadow #75 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
box-shadow #76 css code ====> box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
box-shadow #77 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
box-shadow #78 css code ====> box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
box-shadow #79 css code ====> box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
box-shadow #80 css code ====> box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
box-shadow #81 css code ====> box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
box-shadow #82 css code ====> box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
box-shadow #83 css code ====> box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
box-shadow #84 css code ====> box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
box-shadow #85 css code ====> box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
box-shadow #86 css code ====> box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
box-shadow #87 css code ====> box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; border-radius: 35px;
box-shadow #88 css code ====> box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
box-shadow #89 css code ====> box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
box-shadow #90 css code ====> box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
box-shadow #91 css code ====> box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
box-shadow #92 css code ====> box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
box-shadow #93 css code ====> box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
相关文章
|
程序员 Linux Docker
使用Docker本地安装部署Draw.io绘图工具并实现远程访问协作办公
使用Docker本地安装部署Draw.io绘图工具并实现远程访问协作办公
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4001 7
|
5月前
|
机器学习/深度学习 人工智能 自然语言处理
多模态交互+大模型赋能:2025AI数字人十大技术突破全景解析
AI数字人2025迎十大突破:超拟真语音、高精度表情、多模态交互、大模型赋能、实时渲染优化、跨语言翻译、情感计算、虚实融合、隐私安全与自主学习,广泛应用于政务、医疗、金融等领域。世优科技推出“世优波塔”,实现全栈式落地,助力企业数字化转型。
613 0
多模态交互+大模型赋能:2025AI数字人十大技术突破全景解析
|
人工智能 自然语言处理 搜索推荐
生成式AI掀起职业革命:哪些工作的门槛越来越低?与生成式人工智能(GAI)认证的兴起
本文探讨生成式AI如何改变职场生态,降低内容创作、数据分析和客户服务等领域的专业门槛,并分析GAI认证的兴起与意义。生成式AI通过自然语言处理、图像生成等技术提升效率,而GAI认证则为企业和个人提供技能标准,助力职业发展。两者结合将塑造未来职场新生态,推动社会进步与技术创新。
生成式AI掀起职业革命:哪些工作的门槛越来越低?与生成式人工智能(GAI)认证的兴起
|
前端开发 UED 开发者
React 对话框组件 Dialog
本文详细介绍了如何在 React 中实现一个功能完备的对话框组件(Dialog),包括基本用法、常见问题及其解决方案,并通过代码案例进行说明。从安装依赖到创建组件、添加样式,再到解决关闭按钮失效、背景点击无效、键盘导航等问题,最后还介绍了如何添加动画效果和处理异步关闭操作。希望本文能帮助你在实际开发中更高效地使用 React 对话框组件。
603 75
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
2749 2
|
Kubernetes 调度 算法框架/工具
NVIDIA Triton系列02-功能与架构简介
本文介绍了NVIDIA Triton推理服务器的功能与架构,强调其不仅适用于大型服务类应用,还能广泛应用于各类推理场景。Triton支持多种模型格式、查询类型和部署方式,具备高效的模型管理和优化能力,确保高性能和系统稳定性。文章详细解析了Triton的主从架构,包括模型仓库、客户端应用、通信协议和推理服务器的核心功能模块。
841 1
NVIDIA Triton系列02-功能与架构简介
|
存储 监控 调度
云服务器成本优化深度解析与实战案例
本文深入探讨了云服务器成本优化的策略与实践,涵盖基本原则、具体策略及案例分析。基本原则包括以实际需求为导向、动态调整资源、成本控制为核心。具体策略涉及选择合适计费模式、优化资源配置、存储与网络配置、实施资源监控与审计、应用性能优化、利用优惠政策及考虑多云策略。文章还通过电商、制造企业和初创团队的实际案例,展示了云服务器成本优化的有效性,最后展望了未来的发展趋势,包括智能化优化、多云管理和绿色节能。
|
API 开发者 索引
Python中的省略号(Ellipsis)赋值方式
在Python中,省略号(`...`)是一种特殊对象,称为Ellipsis,虽不常用但在特定场景下非常实用,如函数占位、未实现方法示例及NumPy数组处理。本文通过示例介绍`a = ...`的用法。省略号类似于`None`,可用作代码结构的占位符,保持代码完整性和可读性,同时在API设计中标识待实现的方法。特别是在NumPy中,省略号用于表示多维数组的剩余维度,简化数组操作,提高代码灵活性和可读性。掌握这一技巧有助于提升Python编程能力。
552 1
|
前端开发 JavaScript API
探索HTML中的元素关系:父元素、子元素、祖先元素与后代元素
探索HTML中的元素关系:父元素、子元素、祖先元素与后代元素
1080 4

热门文章

最新文章

下一篇
开通oss服务