技术栈

按钮凸起与按下css效果

林啾啾2025-02-10 22:50

效果展示

css实现代码

凸起效果:

css 复制代码
box-shadow: 7px 7px 12px rgba(0, 0, 0.4), -7px -7px 12px rgba(255, 255, 255, 0.9);

凹陷效果:

css 复制代码
box-shadow: 0 0 0 rgba(0, 0, 0, 0.4),
			0 0 0 rgba(255, 255, 255, 0.9),
			inset -7px -7px 12px rgba(255, 255, 255, 0.9),
			inset 7px 7px 12px rgba(0, 0, 0, 0.4);
上一篇:scss模块化
下一篇:【读书笔记·VLSI电路设计方法解密】问题46:什么是bug覆盖率
相关推荐
之歆
3 分钟前
前端存储方案对比:Cookie-Session-LocalStorage-IndexedDB
前端
哟哟耶耶
5 分钟前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css
是罐装可乐
7 分钟前
深入理解“句柄(Handle)“:从浏览器安全到文件系统访问
前端·javascript·安全
华科易迅
29 分钟前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏
29 分钟前
Next.js 13变化有多大?
前端·react·nextjs
糖炒栗子0326
30 分钟前
前端项目标准环境搭建与启动
前端
不是az
31 分钟前
CSS知识点记录
前端·javascript·css
爱分享的阿Q
39 分钟前
GPT6-Spud-AGI前夜的豪赌
前端·easyui·agi
西西小飞龙
1 小时前
Less/Sass Mixins vs. Extend
前端·less·sass
syjy2
1 小时前
(含下载)BeTheme WordPress主题使用教程
前端·wordpress·wordpress建站
热门推荐
01GitHub 镜像站点02一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决?3 种方案实测,附完整排查流程04AI 编程效率翻倍:Superpowers Skills 上手清单 + 完整指南05MySQL表约束详解:8大核心约束实战指南06Oh My Codex 快速使用指南07CodeBuddy与WorkBuddy深度对比:腾讯两款AI工具差异及实操指南08VMware Workstation Pro 17 虚拟机完整安装教程(2026最新)09实测!Gemma 4 成功跑在安卓手机上:离线 AI 助手终于来了10UV安装并设置国内源