圆角用 border-radius 实现，需在基础样式中设置并避免 hover 中遗漏；悬浮用 :hover 和 transition 实现，配合 transform 与 box-shadow；内容溢出时加 overflow: hidden 裁剪。
圆角怎么加？用 border-radius 就够了
卡片圆角不是靠图片或复杂布局，核心就一个 CSS 属性：border-radius。它直接作用在卡片容器（比如 div）上，值越大，圆角越明显。
常见写法：
card {
border-radius: 8px; /* 四个角统一 */
border-radius: 12px 4px; /* 水平方向 12px，垂直方向 4px */
border-radius: 0 12px 12px 0; /* 左上、右上、右下、左下分别设置 */
}
注意：如果卡片有边框（border）或阴影（box-shadow），border-radius 会一并圆滑处理它们——这是预期行为，不是 bug。
悬浮效果怎么触发？用 :hover 伪类
悬浮（鼠标移入时变化）靠的是 CSS 的 :hover，它必须写在目标元素选择器后面，不能单独存在。
典型结构：
<div class="card">内容</div>
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px); /* 往上浮一点 */
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
-
transition必须写在常态规则里，否则 hover 时变化会生硬 - 别只加
box-shadow，配合轻微transform才有“浮起来”的真实感 - 移动端没有 hover，所以这个效果仅对鼠标设备有效；若需兼容触摸设备，得额外加 JS 切换 class
为什么圆角悬停后消失？检查是否覆盖了 border-radius
最常踩的坑：hover 状态里写了新样式，但漏掉了 border-radius，导致它被重置为默认 0。
错误示例：
.card:hover {
background-color: #f5f5f5;
/* 忘了写 border-radius，它就变回直角了 */
}
正确做法是显式继承或重申：
.card:hover {
background-color: #f5f5f5;
border-radius: 8px; /* 显式保留 */
}
或者更稳妥：把 border-radius 写在基础样式里，hover 中不改动它——只要不主动覆盖，它就不会丢。
卡片内容溢出圆角？用 overflow: hidden
如果卡片里放了图片、图标或绝对定位元素，它们可能撑破圆角边界，露出直角区域。
解决方法很简单，在卡片容器上加：
.card {
border-radius: 8px;
overflow: hidden; /* 关键！裁掉超出部分 */
}
注意点：
-
overflow: hidden会影响内部position: absolute元素的定位范围，若需让某个角标“贴着圆角边缘”显示，得把角标放在卡片外层再用负 margin 调整 - 不要对卡片子元素单独设
border-radius，那只是局部圆角，整体轮廓还是方的
圆角和悬浮本身都不难，难的是组合时各属性之间的隐含影响——比如 overflow 和 transform 在某些旧版 Safari 下会触发渲染异常，真要支持老版本，得加 transform: translateZ(0) 强制硬件加速。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
