空心按钮需用 border + background-color: transparent 实现，禁用默认背景、协调文字与边框颜色、设置 padding 和 cursor: pointer、防文字选中、适配暗色模式及移动端点击反馈。
用 border + background-color: transparent 实现空心描边效果
空心按钮本质是「无填充、有边框、文字可见」，不能靠 background-color: none（语法错误），必须用 transparent。同时得确保文字颜色和边框颜色协调，否则在浅色背景上可能看不清。
常见错误是只设了 border 却忘了清空默认背景，结果按钮还是实心的；或者用了 outline，导致聚焦时样式错乱。
-
border: 2px solid #007bff控制描边粗细和颜色 -
background-color: transparent是关键，别写成none或留空 -
color: #007bff让文字和边框同色，视觉统一 - 记得显式设置
padding，否则文字会贴边，显得拥挤
避免按钮点击区域过小：补全 cursor 和 user-select
纯描边按钮视觉上“轻”，但交互反馈不能弱。如果没加 cursor: pointer，用户可能误判不可点；若没禁用文字选中，双击容易意外选中「加入购物车」文字。
- 加上
cursor: pointer明确可交互状态 - 加上
user-select: none防止误选（尤其移动端连点） - 如果按钮内含图标（如 SVG），需额外给图标设
pointer-events: none，避免遮挡点击穿透
适配暗色模式：用 prefers-color-scheme 切换描边色
空心按钮在暗色背景下，如果还用浅色描边（比如 #007bff），对比度可能不足。直接硬编码颜色会导致可访问性问题。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
推荐用媒体查询动态切换，而不是 JS 检测：
@media (prefers-color-scheme: dark) {
.add-to-cart-btn {
border-color: #4dabf7;
color: #4dabf7;
}
}
- 别依赖
body[data-theme="dark"]这类自定义属性——它需要 JS 初始化，首屏可能闪白 - 深色模式下描边色建议比亮色模式稍亮（如从
#007bff→#4dabf7），保证 WCAG AA 对比度 - 避免在暗色模式里用
border-color: white，纯白在深灰背景上太刺眼
移动端点击反馈缺失？补一个 :active 伪类压感
空心按钮在手机上点击时，若没视觉反馈，用户会怀疑是否点到了。CSS 的 :active 是最轻量的解法，不需要 JS 或额外 DOM。
- 加
transition: all 0.15s ease在:active前，让变化不突兀 -
:active里可以微调transform: scale(0.98)或临时加深描边色（如border-color: #0056b3） - 别用
background-color填充，否则就不是「空心」了；压感要保持风格一致
描边按钮真正的难点不在实现，而在边缘场景：暗色模式下的可读性、触摸设备的反馈精度、高缩放下的描边模糊——这些细节不处理，用户第一反应不是「好看」，而是「这按钮好像点不动」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
