video::picture-in-picture 伪类仅作用于画中画窗口内视频内容的渲染层，可设置 border、background-color、filter、object-fit、box-shadow 等样式，但无法修改窗口边框、标题栏、关闭按钮或系统控件；必须先通过 pictureinpicture 属性或 pictureInPictureEnabled 启用画中画功能，且仅对 <video> 元素直接使用双冒号语法有效。
video::picture-in-picture 伪类能改什么
它只作用于视频内容在画中画窗口内的渲染层，不是整个浮动窗口。你能控制的包括 border、background-color、filter、object-fit、box-shadow 等，但无法修改窗口边框、标题栏、关闭按钮或系统级控件。
必须先启用画中画功能才能生效
如果 video 元素没显式启用 PiP，::picture-in-picture 样式根本不会触发。常见错误是只写 CSS 却忘了加 HTML 属性：
-
<video controls pictureinpicture>—— 最简方式，布尔属性有即启用 -
videoEl.pictureInPictureEnabled = true—— 必须在元素创建后、插入 DOM 前设置，运行时赋值无效 - Safari on iOS 还要求同时带
playsinline和webkit-playsinline，且不能muted
样式写法和常见陷阱
伪类名是双冒号 ::picture-in-picture，不是单冒号；必须绑定到 video 元素上，不能用类选择器或 ID 代理：
- ✅ 正确：
video::picture-in-picture { border: 2px solid #007bff; } - ❌ 错误：
.my-video::picture-in-picture或#player::picture-in-picture - ⚠️ 注意：某些滤镜（如
blur()）在部分浏览器 PiP 模式下会被忽略或降级处理 - ⚠️
width/height不影响窗口大小（由系统控制），但可配合object-fit调整视频填充方式
别混淆 ::picture-in-picture 和 :picture-in-picture-play
前者针对画中画窗口内的视频内容，后者匹配的是“当前正在以 PiP 模式播放”的原始 video 元素（仍在主页面 DOM 中）。如果你希望主页面视频区域变灰、缩成占位符，该用 video:picture-in-picture-play（单冒号，是状态伪类）；而想让小窗里的画面加边框、调对比度，才用 video::picture-in-picture（双冒号，是伪元素）。
立即学习“前端免费学习笔记（深入）”；
实际调试时最容易漏掉的是 Safari 的静音限制和 iOS 的playsinline 要求——哪怕 CSS 写得再准，PiP 根本进不去，样式就永远不生效。 
