video元素直接设border-radius无效，因其为原生组件，不走标准CSS盒模型裁剪；应通过父容器设border-radius+overflow:hidden实现裁剪，小程序需用cover-view包裹。
video 元素直接设 border-radius 为什么没用
因为大多数浏览器（包括 Chrome、Safari、Firefox）和小程序平台（如支付宝、微信）中，<video> 是原生组件或受硬件加速控制的特殊元素，border-radius 无法直接作用于其渲染层。它不走标准的 CSS 盒模型裁剪路径，而是由底层媒体解码器直接输出画面——样式指令“到不了”那里。
你看到的不是 bug，是渲染架构限制。开发者工具里能看到 border-radius 被解析了，但 computed 样式里圆角值不会影响视频画面本身。
用父容器 + overflow: hidden 是最稳的方案
这不是“凑合”，而是目前全平台兼容性最高、无需 JS 或 hack 的正解。核心逻辑是：让容器负责裁剪，视频只管播放。
- 给
<video>的**直接父容器**设置border-radius和overflow: hidden - 确保父容器尺寸 ≥ video 尺寸（避免内部滚动或缩放干扰）
- 不要给
<video>自身设border-radius，它会干扰部分平台的自动宽高计算 - 如果父容器已有
overflow: auto或scroll，可临时改hidden验证；若需保留滚动，改用overflow: clip（现代浏览器支持，比hidden更语义化）
支付宝/微信小程序里还要加一层 cover-view
在支付宝小程序中，仅靠 overflow: hidden 可能仍不生效——因为 <video> 是顶层原生视图，父容器的 CSS 裁剪对其无效。此时必须用平台提供的覆盖层方案：
立即学习“前端免费学习笔记（深入）”；
- 把
<video>放进<cover-view>或<cover-image>容器（微信/支付宝均支持） -
<cover-view>设置border-radius和overflow: hidden - 注意：
<cover-view>不支持背景渐变、伪元素等复杂样式，仅作裁剪容器用 - 若需阴影效果，只能加在
<cover-view>外层普通 view 上，并确保外层不设overflow: hidden
容易被忽略的细节：background-clip 和 transform 干扰
即使加了 overflow: hidden，某些场景下圆角边缘仍发虚或被拉直，常见于：
- 父容器用了
background: linear-gradient(...)但没写background-clip: padding-box→ 渐变铺满边框区，压平圆角视觉 - 父容器有
transform: translateZ(0)或will-change: transform→ 在旧版 Safari 和部分 Android WebView 中，会破坏overflow: hidden对圆角的裁剪能力 - video 设置了
object-fit: cover但父容器未设固定宽高 → 实际渲染区域超出圆角边界，裁不干净
真正在意边缘精度时，别只盯着 border-radius 值本身，得同步盯住裁剪上下文是否完整、背景是否越界、硬件加速是否意外介入。
