video标签可加border但易遮挡controls，推荐用wrapper容器加边框并设overflow:hidden；box-shadow更灵活且不干扰交互；自定义controls时需重置伪元素默认边框。
video 标签不能直接用 border 属性加边框？
不是不能，而是 border 会加在 video 元素盒模型的外层，但很多浏览器（尤其是 Chrome / Safari）对 <video></video> 的默认 display 是 inline，且内部渲染有特殊层叠逻辑，直接写 border: 2px solid #333 常常“看不见”或错位。更关键的是：边框会盖住视频的 controls 控件（比如播放按钮、进度条），导致交互异常。
用 wrapper 容器 + CSS 边框最稳妥
把 <video></video> 包进一个 <div>，给容器加边框和圆角，再控制内边距和溢出，能完全避免控件被裁切或遮挡。这是生产环境最常用、兼容性最好的方式。
<ul>
<li>容器设 <code>display: block 或 inline-block，避免行内对齐问题
padding 留出控件空间（推荐至少 8px）border-radius 时，overflow: hidden 必须同步设置，否则圆角不生效<video></video> 本身设 width: 100% 以外的宽高，否则可能拉伸变形<div class="video-wrapper">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>
<style>
.video-wrapper {
border: 3px solid #4a6fa5;
border-radius: 12px;
padding: 8px;
overflow: hidden;
display: inline-block;
}
.video-wrapper video {
display: block;
width: 100%;
height: auto;
}
</style>
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::-webkit-media-controls { outline: none; } - 隐藏原生控件边框：
video::-webkit-media-controls-panel { border: none; } - 自定义控件容器必须显式设
border或box-shadow，否则看起来“没边框”
