video::picture-in-picture仅作用于画中画中video元素的渲染层，可设border、background-color等样式；必须直接写在video上且启用PiP功能才生效；Safari需同时设playsinline和webkit-playsinline且非静音；::picture-in-picture-media-controls可定制控件样式（仅Chromium支持）；其余如::picture-in-picture-window等均无效。
video::picture-in-picture 只能改视频内容层，不是整个窗口
这个伪类作用对象是画中画窗口里 video 元素的**渲染层**，不是浮动窗口本身。你改不了标题栏、关闭按钮、系统控件，也调不动窗口大小或位置（那些由操作系统控制）。
能生效的样式包括：border、background-color、filter、object-fit、box-shadow。比如加个高斯模糊背景或调整对比度，都靠它。
别写成 .my-video::picture-in-picture 或 #player::picture-in-picture——必须直接绑定到 video 元素上，否则不触发。
必须先启用 PiP 功能，否则 CSS 完全不生效
只写 CSS 是没用的。浏览器看到 video::picture-in-picture 但发现该 video 根本不支持 PiP，就直接跳过样式计算。
启用方式有两种：
-
—— 最简，布尔属性有即启用 -
videoEl.pictureInPictureEnabled = true—— 必须在元素插入 DOM 前 设置，插入后赋值无效
Safari on iOS 还额外要求：playsinline 和 webkit-playsinline 同时存在，且不能 muted；否则连进入 PiP 都做不到，样式自然白写。
::picture-in-picture-media-controls 可以定制小窗里的播放控件
如果你希望调整画中画窗口内部的播放/暂停/音量按钮样式，要用 ::picture-in-picture-media-controls。
它支持改颜色、尺寸、背景、圆角等，例如：
video::picture-in-picture-media-controls {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 4px;
}
注意：这个伪类目前仅 Chromium 系列（Chrome、Edge）稳定支持；Firefox 和 Safari 尚未实现，不要依赖它做核心功能。
别碰 ::picture-in-picture-progress 和 ::picture-in-picture-window
::picture-in-picture-progress 不是标准伪类，所有主流浏览器都不识别——你写了也不会生效，进度条样式完全不可控。
::picture-in-picture-window 听起来很诱人，但实际无效。浏览器根本不响应这个选择器，设置 width、height、position 都被忽略。窗口尺寸和位置由系统策略决定，前端无权干预。
真正能影响小窗视觉表现的，只有三个有效入口：video::picture-in-picture、video::picture-in-picture-media-controls、video:picture-in-picture-play（单冒号，用于主页面原始元素状态反馈）。其余名字相似的，基本都是文档误传或实验性废弃特性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
