[zh-CN]: sync&add translation for PictureInPictureEvent (#23561)

Co-authored-by: A1lo <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

files/zh-cn/web/api/pictureinpictureevent/index.md

@@ -0,0 +1,40 @@
+---
+title: PictureInPictureEvent
+slug: Web/API/PictureInPictureEvent
+l10n:
+  sourceCommit: bb4d21e3c6e71db4e0ba983a450d6ed628e82670
+---
+
+{{APIRef("Picture-in-Picture API")}}
+
+**`PictureInPictureEvent`** 接口表示画中画相关的事件，包括 {{domxref("HTMLVideoElement/enterpictureinpicture_event", "enterpictureinpicture")}}、{{domxref("HTMLVideoElement/leavepictureinpicture_event", "leavepictureinpicture")}} 和 {{domxref("PictureInPictureWindow/resize_event", "resize")}}。
+
+{{InheritanceDiagram}}
+
+## 构造函数
+
+- {{domxref("PictureInPictureEvent.PictureInPictureEvent", "PictureInPictureEvent()")}}
+  - : 使用给定的参数创建一个 `PictureInPictureEvent` 事件。
+
+## 实例属性
+
+_此接口还从其父级 {{domxref("Event")}} 继承了属性_。
+
+- {{domxref("PictureInPictureEvent.pictureInPictureWindow")}}
+  - : 返回与事件相关的 {{domxref("PictureInPictureWindow")}}。
+
+## 实例方法
+
+_此接口还从其父级 {{domxref("Event")}} 继承了方法_。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Event")}} 父接口

files/zh-cn/web/api/pictureinpictureevent/pictureinpictureevent/index.md

@@ -0,0 +1,41 @@
+---
+title: PictureInPictureEvent：PictureInPictureEvent() 构造函数
+slug: Web/API/PictureInPictureEvent/PictureInPictureEvent
+l10n:
+  sourceCommit: ee99bfdebd8f9c691a06afec0895285a3bf2da2a
+---
+
+{{APIRef("Picture-in-Picture API")}}
+
+**`PictureInPictureEvent()`** 构造函数返回一个新的 {{domxref("PictureInPictureEvent")}} 对象。
+
+## 语法
+
+```js-nolint
+new PictureInPictureEvent(type, options)
+```
+
+### 参数
+
+- `type`
+  - : 表示事件名称的字符串。它区分大小写，浏览器将其设置为 `enterpictureinpicture`、`leavepictureinpicture` 或 `resize`。
+- `options`
+  - : _除了 {{domxref("Event/Event", "Event()")}} 中定义的属性外_，该对象还可以具有以下属性：
+    - `pictureInPictureWindow`
+      - : 一个 {{domxref("PictureInPictureWindow")}} 对象。
+
+### 返回值
+
+一个新的 {{domxref("PictureInPictureEvent")}} 对象。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 它所属的 {{domxref("PictureInPictureEvent")}} 接口。

files/zh-cn/web/api/pictureinpictureevent/pictureinpicturewindow/index.md

@@ -0,0 +1,26 @@
+---
+title: PictureInPictureEvent：pictureInPictureWindow 属性
+slug: Web/API/PictureInPictureEvent/pictureInPictureWindow
+l10n:
+  sourceCommit: ee99bfdebd8f9c691a06afec0895285a3bf2da2a
+---
+
+{{APIRef("Picture-in-Picture API")}}
+
+{{domxref("PictureInPictureEvent")}} 接口的 **`pictureInPictureWindow`** 只读属性返回与事件相关的 {{domxref("PictureInPictureWindow")}}。
+
+## 值
+
+{{domxref("PictureInPictureWindow")}}。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [Picture-in-Picture API](/zh-CN/docs/Web/API/Picture-in-Picture_API)

files/zh-cn/web/css/_colon_picture-in-picture/index.md

@@ -1,6 +1,8 @@
 ---
 title: ":picture-in-picture"
 slug: Web/CSS/:picture-in-picture
+l10n:
+  sourceCommit: 04ebe57066db2cff350018649bdb15b2a10c67ba
 ---
 
 {{CSSRef}}
@@ -28,11 +30,11 @@ slug: Web/CSS/:picture-in-picture
 页面的 HTML 如下所示：
 
 ```html
-<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>
+<h1>MDN Web Docs 演示：:picture-in-picture 伪类</h1>
 
 <p>
-  This demo uses the <code>:picture-in-picture</code> pseudo-class to
-  automatically change the style of a video entirely using CSS.
+  此演示使用 CSS <code>:picture-in-picture</code>
+  伪类自动改变视频的完整样式。
 </p>
 
 <video id="pip-video"></video>