video::picture-in-picture仅能修改画中画窗口内video元素的样式（如border、filter、object-fit），无法控制窗口边框、标题栏等系统级ui；需满足pictureinpicture属性启用、safari需非静音等前提，且调试须在真实pip模式下进行。
video::picture-in-picture 伪类确实能改窗口里的视频内容样式，但不能美化整个画中画浮动窗口本身——那个窗口的边框、标题栏、关闭按钮、位置和大小，网页 CSS 无权控制。
video::picture-in-picture 能改什么
它只作用于画中画窗口内 <video></video> 元素的渲染层（即视频画面那一块），不是整个系统级窗口。你能安全设置的包括：
-
border、box-shadow、background-color（背景色仅在视频未铺满时可见） -
filter（如contrast(1.2)、brightness(0.9)；但blur()在部分浏览器 PiP 模式下会被忽略） -
object-fit和object-position（影响视频如何缩放/定位，width/height无效）
为什么写了没反应？常见失效原因
样式不生效，大概率不是写错了，而是前提条件没满足：
-
<video></video>元素必须显式启用画中画：HTML 中加pictureinpicture属性，或 JS 中设video.pictureInPictureEnabled = true - Safari on iOS 要求同时满足：
playsinline+webkit-playsinline+ 视频**不能静音**（muted会直接禁用 PiP） - 伪类必须用双冒号：
video::picture-in-picture，写成:picture-in-picture或套在 class 上（如.my-video::picture-in-picture）都不生效 - 浏览器不支持该伪类（如旧版 Chrome 或 Firefox）——可先检查
document.pictureInPictureElement是否存在
::picture-in-picture-window 是啥？能用吗
目前（2026 年 9 月）::picture-in-picture-window 仍是实验性 CSS 伪类，仅 Chromium 120+（Edge 120+/Chrome 120+）部分支持，且行为不稳定：
- 它理论上可控制窗口尺寸（
width/height）、位置（top/right）、边框等，但实际中常被浏览器忽略或重置 - 即使生效，也无法覆盖系统级 UI（如 macOS 的 PiP 标题栏、Windows 的关闭按钮）
- 生产环境不建议依赖它做核心样式；若真要用，务必加
@supports检测
想真正“美化”画中画体验，得换思路
与其强求修改系统窗口，不如把控制点放在你可控的地方：
- 用
video:picture-in-picture-play（单冒号）给主页面的<video></video>加过渡动画、灰度、占位提示，让用户感知“已进入 PiP” - 监听
enterpictureinpicture/leavepictureinpicture事件，动态切换自定义控制按钮状态 - 对缓冲、播放状态用
::picture-in-picture-buffering或::picture-in-picture-play-state做视觉反馈 - 如果需要完全定制窗口外观，只能放弃原生 PiP，改用固定定位 +
position: fixed浮层模拟（B 站等平台实际采用的方案）
最易被忽略的一点：PiP 样式调试必须在真实触发后才能看到效果——光靠 DevTools 选中元素是看不到 ::picture-in-picture 的，得先调用 video.requestPictureInPicture() 进入模式，再打开 DevTools 切换到画中画窗口的独立 DevTools（Chrome 中按 Ctrl+Shift+I 两次）才能 inspect。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
