box-shadow 是控制卡片阴影的正确属性，需按水平偏移、垂直偏移、模糊半径、扩散半径、颜色顺序设置，配合 overflow: hidden、transform、CSS 变量及 -webkit-tap-highlight-color 等细节保障多端一致体验。
card 边框阴影用 box-shadow 而不是 border
很多人一想“边框阴影”，下意识去调 border 或加 outline，结果阴影出不来或者位置错乱。真正控制卡片投影效果的是 box-shadow，它独立于边框存在，能精准控制偏移、模糊、扩散和颜色。
常见错误现象：border: 1px solid #ccc 加了但没阴影；text-shadow 被误用在卡片上；阴影只出现在 hover 后，但默认态没设导致“闪一下”。
-
box-shadow值顺序固定：水平偏移、垂直偏移、模糊半径、扩散半径、颜色（如0 2px 8px -2px rgba(0,0,0,0.1)） - 负的扩散值（如
-2px）能让阴影更贴合卡片边缘，避免“浮空感” - 默认态建议设一个弱阴影（如
0 1px 3px rgba(0,0,0,0.08)），hover 时再增强，体验更平滑
hover 时阴影变大要防布局抖动
直接把 box-shadow 的模糊值从 4px 拉到 12px 很常见，但若卡片没设 overflow: hidden 或父容器高度固定，阴影扩展会触发重排，尤其在 flex/grid 容器里容易挤开相邻卡片。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 给 card 元素加
overflow: hidden，防止阴影溢出影响布局流 - 优先用 transform 配合阴影（比如 hover 时加
transform: translateY(-2px)），视觉上更“抬起”，且不触发重排 - 如果必须加大阴影，确保所有状态下的
box-shadow使用相同扩散值（如统一用0），只调模糊和颜色透明度，避免尺寸变化
适配深色模式时别硬写 rgba(0,0,0,0.2)
纯黑底色下 rgba(0,0,0,0.2) 的阴影几乎看不见，而浅色模式下又可能太重。硬编码颜色值会导致暗色模式失效。
立即学习“前端免费学习笔记（深入）”；
- 用
color-scheme: light dark配合prefers-color-scheme媒体查询动态换色（例如暗色模式下改用rgba(255,255,255,0.1)） - 更稳妥的做法是用系统色值：
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.1))，然后在 :root 或 dark class 里定义--shadow-color - 注意 Safari 对
prefers-color-scheme在内联 style 中的支持较弱，务必写在 CSS 文件或<style></style>标签里
移动端点击阴影闪烁问题（iOS Safari 特有）
iOS Safari 默认给可点击元素加灰色背景高亮（-webkit-tap-highlight-color），和 box-shadow 叠加后会出现意外的亮边或闪烁，尤其用 cursor: pointer 或绑了 click 事件的 card。
- 加
-webkit-tap-highlight-color: transparent彻底禁用该高亮 - 避免对
<div> 卡片直接绑定 <code>onclick，改用role="button"+tabindex="0"+keydown监听回车/空格，更符合可访问性且减少触发高亮 - 如果用了
transform: scale(0.98)类似微动效，务必加will-change: transform，否则 iOS 上阴影渲染易糊
阴影本身不难，难的是不同设备、模式、交互状态下表现一致。最常被忽略的是 iOS tap 高亮和深色模式变量覆盖——这两处一漏，用户第一眼就觉得“这个卡片不专业”。
