不支持border-radius因其非标准、盒模型未定义且被主流浏览器废弃；需用div+@keyframes实现：外层设overflow:hidden和border-box，内层用transform:translateX()动画。
滚动文字（）本身不支持 border-radius，直接加无效——因为 是个行内替换元素，且默认 box-sizing 行为特殊，还存在浏览器兼容性问题。真要实现带圆角边框的滚动效果，得用标准 HTML + CSS 动画替代。
为什么 border-radius 对
Chrome、Firefox 已废弃 ，Safari 完全不支持；即使在旧版 IE 中生效，其渲染盒模型也不响应 border-radius。根本原因是该标签没有规范定义的盒模型行为，overflow 和 border 的作用范围模糊，border-radius 无处可“裁剪”。
用 div + @keyframes 实现可圆角的滚动容器
核心思路：用普通 div 包裹文字，设固定宽高和 overflow: hidden，再对内部元素做水平位移动画。此时整个容器是标准块级元素，border 和 border-radius 完全可用。
- 外层容器必须设
position: relative和overflow: hidden - 内层文字容器设
white-space: nowrap+position: absolute，宽度需显式大于外层（如width: max-content或预估值） - 动画使用
transform: translateX()替代left，避免重排，更流畅 -
box-sizing: border-box要加在外层容器上，确保border和padding不撑大总尺寸
.scroll-container {
width: 300px;
height: 40px;
border: 2px solid #333;
border-radius: 12px;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.scroll-text {
position: absolute;
white-space: nowrap;
top: 50%;
left: 100%;
transform: translateY(-50%);
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%) translateY(-50%); }
100% { transform: translateX(-100%) translateY(-50%); }
}
box-sizing 在这里起什么作用
如果不设 box-sizing: border-box，外层容器的 width: 300px 指的是内容区宽度，加上 border: 2px 后实际占位变成 304px，容易破坏布局。尤其在 Flex/Grid 容器中，会导致换行或溢出。设为 border-box 后，300px 就是最终渲染宽度，border 和 padding 都向内压缩。
立即学习“前端免费学习笔记（深入）”；
移动端和性能要注意的点
滚动动画在低端 Android 或 iOS Safari 上可能卡顿，关键优化项：
- 务必用
transform和opacity触发 GPU 加速，避免操作left、width等触发重排的属性 - 动画时长别太短（
），否则文字闪动明显；也别太长（> 15s），用户会误以为卡住 - 如果文字内容动态变化，记得重置动画：
animation: none; animation: scroll-left 10s ...强制重播 - 圆角值别超过容器高度一半（如
height: 40px时border-radius: 20px是极限），否则视觉上会“削顶”
真正难的不是写出来，而是让圆角在各种缩放、DPR、字体加载延迟下都稳住形状——建议所有尺寸用 px 或 rem，避开 % 和 em 在动画中的累积误差。
