做网页交互的时候，经常希望鼠标移到卡片上，元素能同时产生圆角变化和阴影加深的效果，让页面更有质感。要实现这种多属性同时过渡的动画，核心就是CSS的transition属性。本文会从基础语法讲起，逐步给出同时过渡border-radius和box-shadow的完整方案，并分析一些容易踩到的坑。
transition的基础语法与工作原理
transition是CSS3提供的过渡属性，它可以让元素从一种样式状态平滑地变化到另一种样式状态，而不是瞬间跳变。它本身是一个简写属性，包含四个子属性：transition-property指定哪些属性参与过渡，transition-duration指定过渡时长，transition-timing-function指定缓动函数，transition-delay指定延迟时间。
transition的触发机制值得注意：它不是自动播放的动画，而是依赖样式的变化。当元素的某个属性值发生改变时，浏览器会在新旧值之间做插值计算，每一帧渲染出中间状态，从而形成平滑过渡。常见的触发方式包括:hover、:focus等伪类，以及通过JavaScript动态修改类名或行内样式。
一个关键点是，参与过渡的属性值必须是可插值的。简单来说，数值类型要能对得上。border-radius是长度值，box-shadow是颜色加多个长度值组成的复合值，这两者都支持插值，所以它们天然适合做过渡动画。
实现border-radius与box-shadow同时过渡
假设我们有一个卡片元素，默认状态下是小圆角、浅阴影，鼠标悬停时希望圆角变大、阴影加深并且整体上浮。直接看代码：
.card {
width: 300px;
height: 200px;
background-color: #ffffff;
/* 默认状态：小圆角、浅阴影 */
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
/* 关键：明确指定两个属性同时过渡 */
transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
border-radius: 20px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
这段代码的关键在transition这一行。我们用逗号分隔了两组过渡规则，分别针对border-radius和box-shadow，各自指定了0.3秒的时长和ease缓动函数。当悬停触发时，两个属性会同时开始各自的过渡动画，视觉效果上就是圆角变大和阴影加深同步进行。
两组过渡规则完全可以设置不同的参数。比如想让阴影变化慢一点、更有层次感，可以写成transition: border-radius 0.25s ease, box-shadow 0.45s ease-out;，这样圆角先快速到位，阴影随后缓缓浮现，交互体验会更细腻。这种错峰过渡的手法在按钮和卡片设计里非常常见。
用all简化写法是否可行
很多教程会直接写transition: all 0.3s ease;，这样确实能覆盖所有可过渡属性，代码也更短。但这种方式存在两个问题。第一，性能上不够精确，浏览器需要监听元素所有属性的变化，某些属性变化会触发不必要的重绘甚至重排。第二，all会让一些你并不想动画的属性也产生过渡，比如修改颜色、尺寸时都会带上动画，反而干扰预期效果。
因此更推荐的做法是明确列出属性名。除了性能考虑，明确写出的属性列表本身就是一份文档，维护代码的人一眼就能看出这个元素哪些样式会动、哪些不会动，排查问题时也更快。
过渡不生效的常见原因排查
实际开发中经常遇到写了transition却没有动画的情况，这里总结几个高频原因。
第一，box-shadow的值结构不一致。浏览器对box-shadow插值要求新旧值的结构匹配，也就是阴影层数要相同。如果默认状态写了一层阴影，悬停状态写了三层，过渡可能失效或表现异常。建议保持前后层数一致，只改数值：
/* 错误示例：阴影层数不一致 */
.btn {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.btn:hover {
/* 默认一层，这里三层，插值可能出问题 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1),
0 6px 12px rgba(0,0,0,0.15),
0 12px 24px rgba(0,0,0,0.2);
}
/* 正确示例：结构相同，只改数值 */
.btn2 {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.btn2:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
第二，transition写在了他不生效的位置。transition必须写在默认状态的样式里，而不是写在:hover里。如果只写在hover规则中，鼠标移入时有动画，移出时会瞬间跳回原样，体验很不自然。把它放在基础样式里，进出两个方向都有平滑过渡。
第三，初始值缺失。如果元素默认状态没有显式设置border-radius或box-shadow，浏览器会使用默认值（比如box-shadow默认是none），从none到具体阴影值的过渡在部分浏览器中表现不稳定。养成习惯，给参与过渡的属性都写上明确的初始值。
进阶技巧与性能建议
如果希望过渡更有弹性，可以尝试cubic-bezier自定义缓动函数，比如cubic-bezier(0.34, 1.56, 0.64, 1)会带来轻微的回弹效果，配合圆角变化会让卡片看起来像轻轻弹起来一样。缓动函数的选择对体感影响很大，ease-out适合入场，ease-in适合退场，对称交互场景用ease或ease-in-out比较稳妥。
性能方面，border-radius和box-shadow的变化会触发重绘，虽然不涉及布局重排，开销相对可控，但在大面积使用时仍需注意。如果页面中有大量卡片同时悬停过渡，阴影模糊半径又很大，重绘成本会明显上升。一个优化思路是控制阴影的模糊半径和透明度范围，或者在复杂场景下用伪元素加opacity过渡来模拟阴影，因为opacity的变化可以走合成器加速，性能更好。
另外提醒一点，触摸设备上没有hover状态，依赖悬停的过渡在移动端会失去意义。可以为卡片补充点击态的反馈，或者用媒体查询@media (hover: hover)来判断设备是否支持悬停，针对不同环境提供不同的交互方案，这样整套动效在各类设备上都能有合理的表现。
CSS transitionborder-radiusbox-shadow修改时间：2026-09-13 00:18:34