技术栈

按钮凸起与按下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覆盖率
相关推荐
陆枫Larry
5 分钟前
小程序 scroll-view 设置 padding 右侧不生效?用一层包裹解决
前端
晴殇i
20 分钟前
CommonJS 与 ES6 模块引入的区别详解
前端·javascript·面试
Selicens
22 分钟前
git批量删除本地多余分支
前端·git·后端
wuhen_n
27 分钟前
KeepAlive:组件缓存实现深度解析
前端·javascript·vue.js
前端付豪
28 分钟前
Nest 项目小实践之图书展示和搜索
前端·node.js·nestjs
wuhen_n
29 分钟前
Vue Router与响应式系统的集成
前端·javascript·vue.js
青青家的小灰灰
1 小时前
金三银四面试官最想听的 React 答案:虚拟 DOM、Hooks 陷阱与大型列表优化
前端·react.js·面试
HelloReader
1 小时前
深入理解 Tauri 架构与应用体积优化实战指南
前端
lemon_yyds
1 小时前
vue 2 升级vue3 : ref 和 v-model 命名为同名
前端·vue.js
codingWhat
1 小时前
小程序里「嵌」H5:一套完整可落地的 WebView 集成方案
前端·uni-app·webview
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书(Feishu)环境搭建指南04OpenClaw优化飞书API 额度已耗尽问题05Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services06Window 10部署openclaw报错node.exe : npm error code 12807Clawdbot部署教程:解决‘gateway token missing’授权问题的完整步骤08小黑课堂计算机二级WPSoffice题库软件下载安装教程(2026年3月最新版)09OpenClaw大龙虾机器人完整安装教程10网站改了域名,如何查找?