video标签可加border但易遮挡controls，推荐用wrapper容器加边框并设overflow:hidden；box-shadow更灵活且不干扰交互；自定义controls时需重置伪元素默认边框。
video 标签不能直接用 border 属性加边框？
不是不能，而是 border 会加在 video 元素盒模型的外层，但很多浏览器（尤其是 Chrome / Safari）对 的默认 display 是 inline，且内部渲染有特殊层叠逻辑，直接写 border: 2px solid #333 常常“看不见”或错位。更关键的是：边框会盖住视频的 controls 控件（比如播放按钮、进度条），导致交互异常。
用 wrapper 容器 + CSS 边框最稳妥
把 如果想模拟边框但带阴影、虚化或内嵌感， 一旦用了 立即学习“前端免费学习笔记（深入）”； 包进一个
display: block 或 inline-block，避免行内对齐问题padding 留出控件空间（推荐至少 8px）border-radius 时，overflow: hidden 必须同步设置，否则圆角不生效 本身设 width: 100% 以外的宽高，否则可能拉伸变形box-shadow 比 border 更灵活，还能做“发光”效果
box-shadow 是更好的选择。它不占用布局空间，不影响控件点击区域，且支持多层阴影叠加。
box-shadow: 0 0 0 2px #e0e0e0
inset）：box-shadow: inset 0 0 0 2px #ccc，但注意这会覆盖部分 controls，慎用transition: box-shadow 0.2s; &:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
border 混用——两者叠加容易造成视觉混乱自定义 controls 时边框要重置所有伪元素
controlslist="nodownload nofullscreen" 或完全自定义 controls（比如用 JS 实现播放/暂停按钮），就一定要检查浏览器默认控件的伪类是否还残留边框。Chrome 中 ::-webkit-media-controls-panel 和 ::-webkit-media-controls-overlay 可能自带 outline 或 border。
边框样式看着简单，但 video 是少数几个在不同浏览器里盒模型行为差异明显的 HTML 元素之一。wrapper 方案最省心，box-shadow 最适合动效，而自定义控件时，别忘了那些藏在伪类里的默认边框。video::-webkit-media-controls { outline: none; }
video::-webkit-media-controls-panel { border: none; }
border 或 box-shadow，否则看起来“没边框”
