Merge branch 'mdn:main' into fix-design-responsivo

files/ja/web/api/element/index.md

@@ -42,7 +42,7 @@ _`Element` は、親インターフェイスである {{DOMxRef("Node")}}、お
 - {{DOMxRef("Element.currentCSSZoom")}} {{ReadOnlyInline}} {{experimental_inline}}
   - : 要素の実効ズームサイズを示す数値。要素がレンダリングされない場合は 1.0 です。
 - {{DOMxRef("Element.elementTiming")}} {{Experimental_Inline}}
-  - : {{domxref("PerformanceElementTiming")}} API において要素を監視するためのマークとなる [`elementtiming`](/ja/docs/Web/HTML/Attributes/elementtiming) 属性を に反映した文字列です。
+  - : {{domxref("PerformanceElementTiming")}} API において要素を監視するためのマークとなる [`elementtiming`](/ja/docs/Web/HTML/Attributes/elementtiming) 属性を反映した文字列です。
 - {{domxref("Element.firstElementChild")}} {{ReadOnlyInline}}
   - : この要素の最初の子要素を返します。
 - {{DOMxRef("Element.id")}}

files/zh-cn/learn/accessibility/index.md

@@ -7,7 +7,7 @@ l10n:
 
 {{LearnSidebar}}
 
-如果你想成为一名 Web 开发者，学习一些 HTML、CSS、JavaScript 是有用的。除了机械地使用之外，重要的是学习如何**负责任**地使用这些技术，让所有用户能在 Web 使用你的作品。为了帮你实现这个目标，本模块涉及常见的最佳实践（在 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 专题中有所体现），以及大量和严格执行无障碍有关的技巧。接下来会详细介绍无障碍。
+如果你想成为一名 Web 开发者，学习一些 HTML、CSS、JavaScript 是有用的。除了机械地使用之外，重要的是学习如何**负责任**地使用这些技术，让所有用户能在 Web 使用你的作品。为了帮你实现这个目标，本模块涉及常见的最佳实践（在 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题中有所体现），以及大量和严格执行无障碍有关的技巧。接下来会详细介绍无障碍。
 
 ## 概述
 
@@ -25,23 +25,23 @@ l10n:
 
 ## 前提
 
-要充分理解本模块，你至少需要读过 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 专题的前两个模块，或者在读相关技术专题时，读过无障碍模块的相关部分（这样或许会更好）。
+要充分理解本模块，你至少需要读过 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 主题的前两个模块，或者在读相关技术主题时，读过无障碍模块的相关部分（这样或许会更好）。
 
 > [!NOTE]
 > 如果你工作的计算机/掌上电脑/其他设备无法创建文件，可以使用在线编码程序（例如，[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)）实验大多数代码示例。
 
 ## 指南
 
 - [什么是无障碍？](/zh-CN/docs/Learn/Accessibility/What_is_accessibility)
-  - : 本模块的第一篇文章深入介绍无障碍是什么——包括：我们需要考虑哪一群人，为什么要考虑这些人，不同的人使用什么工具与 Web 交互，以及我们如何构建 Web 开发工作流的无障碍部分。
+  - : 这个模块的第一篇文章深入介绍无障碍是什么——包括：我们需要考虑哪一群人，为什么要考虑这些人，不同的人使用什么工具与 Web 交互，以及我们如何构建 Web 开发工作流的无障碍部分。
 - [HTML：无障碍的良好基础](/zh-CN/docs/Learn/Accessibility/HTML)
   - : 只要确保正确的 HTML 元素被用于正确的目的，大量的 Web 内容就是无障碍的。这篇文章详细讲述 HTML 是如何确保最大程度的无障碍。
 - [CSS 和 JavaScript 无障碍最佳实践](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript)
   - : 当正确使用 CSS 和 JavaScript 时，也能提供无障碍的 Web 体验，但错用的话，会极大地破坏无障碍。这篇文章概括了大量的 CSS 和 JavaScript 最佳实践，这些实践能确保甚至是复杂内容也尽可能是无障碍的。
 - [WAI-ARIA 基础](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)
   - : 接着上一篇文章，有时制作复杂的 UI 控件（涉及非语义化的 HTML 和使用 JavaScript 动态的更新内容）很难。WAI-ARIA 是通过添加额外的语义（浏览器和辅助技术能识别和使用这些语义让用户知道正在发生什么）来解决这类问题的技术。这篇文章以基础级别的视角讲解如何使用它来改善无障碍。
 - [多媒体无障碍](/zh-CN/docs/Learn/Accessibility/Multimedia)
-  - : 会出现无障碍问题的另一类内容就是多媒体——视频、音频和图像内容需要提供合适的文本替代，这样辅助技术和相应的用户就能理解这些内容。本文将介绍如何做到这一点。
+  - : 会出现无障碍问题的另一类内容就是多媒体——视频、音频和图像内容需要提供合适的文本替代，这样辅助技术和相应的用户就能理解这些内容。这篇文章将介绍如何做到这一点。
 - [移动端无障碍](/zh-CN/docs/Learn/Accessibility/Mobile)
   - : 随着用移动设备访问 Web 变得流行，以及主流平台（例如，iOS 和安卓）拥有完备的无障碍工具，为这些平台上的 Web 内容考虑无障碍是重要的。这篇文章讲解移动设备相关的无障碍注意事项。
 

files/zh-cn/learn/css/index.md

@@ -13,26 +13,26 @@ l10n:
 
 在尝试 CSS 之前，你应该学习 HTML 的基础知识。我们建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。
 
-一旦你理解了 HTML 的基础知识，我们就建议你同时更深入地学习 HTML 和 CSS，在这两个专题之间来回切换。这么做是因为在应用了 CSS 后，HTML 会变得更加有趣，学习起来也更有乐趣。并且不了解 HTML 的话，也无法学习 CSS。
+一旦你理解了 HTML 的基础知识，我们就建议你同时更深入地学习 HTML 和 CSS，在这两个主题之间来回切换。这么做是因为在应用了 CSS 后，HTML 会变得更加有趣，学习起来也更有乐趣。并且不了解 HTML 的话，也无法学习 CSS。
 
-在开始本专题之前，你还应该熟悉如何使用电脑，如何被动地使用 Web（例如，只是浏览和消费内容）。你应该按照[安装基础软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中的详细内容搭建基础工作环境，以及按照[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中的内容理解如何创建和管理文件——两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)纯新手模块的一部分。
+在开始本主题之前，你还应该熟悉如何使用电脑，如何被动地使用 Web（例如，只是浏览和消费内容）。你应该按照[安装基础软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中的详细内容搭建基础工作环境，以及按照[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中的内容理解如何创建和管理文件——这两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)纯新手模块的一部分。
 
-在开始本专题之前，还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)，尤其当你是 Web 开发的纯新手的话。不过，[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及，而且更详细。
+在开始本主题之前，还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)，尤其当你是 Web 开发的纯新手的话。不过，[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及，而且更详细。
 
 ## 模块
 
-本专题包含以下模块，建议按顺序学习这些模块。你应该从第一个模块开始。
+本主题包含以下模块，建议按顺序学习这些模块。你应该从第一个模块开始。
 
 - [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)
-  - : CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。在前往掌握 CSS 基础知识（CSS 的运作方式，CSS 语法是什么样子，在 HTML 中如何使用 CSS 添加样式）的道路上，本模块是一个很好的开始。
+  - : CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。在前往掌握 CSS 基础知识（CSS 的运作方式，CSS 语法是什么样子，在 HTML 中如何使用 CSS 添加样式）的道路上，这个模块是一个很好的开始。
 - [CSS 构建块](/zh-CN/docs/Learn/CSS/Building_Blocks)
 
-  - : 本模块承接 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)——这时你已经熟悉 CSS 语言及其语法，有了基本的使用经验，是时候再深入一些。在本模块中，你会学习层叠和继承、可用的选择器类型、单位、大小、为背景和边框添加样式、调试，以及其它内容。
+  - : 这个模块承接 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)——这时你已经熟悉 CSS 语言及其语法，有了基本的使用经验，是时候再深入一些。在这个模块中，你会学习层叠和继承、可用的选择器类型、单位、大小、为背景和边框添加样式、调试，以及其它内容。
 
-    本文的目的是，在了解诸如[为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text)和 [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)等特定领域的知识之前，提供一个能让你编写合格 CSS 的工具集并帮助你理解基本的理论。
+    这篇文章的目的是，在了解诸如[为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text)和 [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)等特定领域的知识之前，提供一个能让你编写合格 CSS 的工具集并帮助你理解基本的理论。
 
 - [为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text)
-  - : 在学完 CSS 语言的基础知识后，下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。本文介绍了为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。在本模块中，还会学习的内容有：在页面中应用自定义字体、为列表和链接添加样式。
+  - : 在学完 CSS 语言的基础知识后，下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。这篇文章介绍了为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。在这个模块中，还会学习的内容有：在页面中应用自定义字体、为列表和链接添加样式。
 - [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)
   - : 看到这儿，你已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在，是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。必要的前置知识已经具备，此时你可以深入 CSS 布局，学习不同的显示设置、现代的布局工具（如弹性盒、CSS 网格）、定位，以及一些你可能仍想了解的传统技术。
 

files/zh-cn/learn/forms/index.md

@@ -15,7 +15,7 @@ l10n:
 
 然而，掌握表单需要的不仅仅是 HTML 知识——你还需要学习一些为表单控件添加样式的特定技术，一些用于处理诸如验证和创建自定义表单控件等内容的脚本知识。因此，在学习下列其他文章之前，我们会建议你先离开去学习一些 [CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript)。
 
-以上内容很好地表明了我们为什么将 Web 表单放在单独模块中，而不是将其混入 HTML、CSS 和 JavaScript 专题中——表单元素比大多数其他的 HTML 元素要复杂，并且它们还需要与相关的 CSS 和 JavaScript 技术紧密配合才能充分利用。
+以上内容很好地表明了我们为什么将 Web 表单放在单独模块中，而不是将其混入 HTML、CSS 和 JavaScript 主题中——表单元素比大多数其他的 HTML 元素要复杂，并且它们还需要与相关的 CSS 和 JavaScript 技术紧密配合才能充分利用。
 
 > [!NOTE]
 > 如果你工作的计算机/掌上电脑/其他设备无法创建文件，可以使用在线编码程序（例如，[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/)）实验（大多数）代码示例。
@@ -39,7 +39,7 @@ l10n:
 ## 表单样式指南
 
 - [为 Web 表单添加样式](/zh-CN/docs/Learn/Forms/Styling_web_forms)
-  - : 本文介绍如何使用 CSS 为表单添加样式，包括完成基本样式任务所需了解的全部基础知识。
+  - : 这篇文章介绍如何使用 CSS 为表单添加样式，包括完成基本样式任务所需了解的全部基础知识。
 - [高级表单样式](/zh-CN/docs/Learn/Forms/Advanced_form_styling)
   - : 在这里学习一些更高级的表单样式技术，用于处理一些很难设置样式的表单元素。
 - [UI 伪类](/zh-CN/docs/Learn/Forms/UI_pseudo-classes)
@@ -48,18 +48,18 @@ l10n:
 ## 验证和提交表单数据
 
 - [客户端表单验证](/zh-CN/docs/Learn/Forms/Form_validation)
-  - : 仅仅发送数据还不够——还需要确保用户填写的表单数据的格式是正确的，以便后续能正确处理，也要确保数据不会破坏应用程序。我们也想帮助用户正确填写表单，让用户在使用应用程序时不会感到困扰。表单验证帮助我们实现这些目标——本文讲解你需要了解的内容。
+  - : 仅仅发送数据还不够——还需要确保用户填写的表单数据的格式是正确的，以便后续能正确处理，也要确保数据不会破坏应用程序。我们也想帮助用户正确填写表单，让用户在使用应用程序时不会感到困扰。表单验证帮助我们实现这些目标——这篇文章讲解你需要了解的内容。
 - [发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data)
-  - : 本文讨论的是当用户提交表单时，会发生什么——表单数据的去向，以及当表单数据到达之后如何处理？还研究一些与发送表单数据有关联的安全问题。
+  - : 这篇文章讨论的是当用户提交表单时，会发生什么——表单数据的去向，以及当表单数据到达之后如何处理？还研究一些与发送表单数据有关联的安全问题。
 
 ## 高级文章
 
 以下文章对于学习路径来说没那么重要，但是当你掌握了上述技术并想了解更多内容时，它们会变得有趣且实用。
 
 - [如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)
-  - : 在某些情况下，出于样式或功能的原因，原生表单微件无法提供你所需的东西。在这种情况下，你会需要使用原生 HTML 构建表单微件。本文通过一个案例研究说明你将如何做到这一点，以及在实际操作时需要注意的事项。
+  - : 在某些情况下，出于样式或功能的原因，原生表单微件无法提供你所需的东西。在这种情况下，你会需要使用原生 HTML 构建表单微件。这篇文章通过一个案例研究说明你将如何做到这一点，以及在实际操作时需要注意的事项。
 - [通过 JavaScript 发送表单](/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript)
-  - : 本文将讨论如何使用表单来构建 HTTP 请求，并通过自定义的 JavaScript 而不是标准的表单提交发送请求。本文还说明为什么要这么做，以及这样做的意图。（参见[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)。）
+  - : 这篇文章将讨论如何使用表单来构建 HTTP 请求，并通过自定义的 JavaScript 而不是标准的表单提交发送请求。这篇文章还说明为什么要这么做，以及这样做的意图。（参见[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)。）
 - [表单控件的 CSS 属性兼容性表](/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
   - : 最后一篇文章提供的参考意在方便查找 CSS 属性与表单元素的兼容性关系。
 

files/zh-cn/web/css/border-image-slice/index.md

@@ -1,6 +1,8 @@
 ---
 title: border-image-slice
 slug: Web/CSS/border-image-slice
+l10n:
+  sourceCommit: b2af4eb16dd4c399ed81f67efd49777fa6ae9030
 ---
 
 {{CSSRef}}
@@ -9,7 +11,7 @@ slug: Web/CSS/border-image-slice
 
 {{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
 
-切分过程会将图像分割为 9 个区域：四个角、四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
+切分过程会将图像分割为 9 个区域：四个角、四个边（edge）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
 
 ![由 border-image 或 border-image-slice 属性定义的九个区域](border-image-slice.png)
 
@@ -51,8 +53,8 @@ border-image-slice: unset;
 
 - 仅指定了**一**个位置（1 个值）时，创建的（上下左右）四个切片将具有相同的宽度/高度。
 - 当指定了**两**个位置（2 个值）时，第一个值表示垂直方向的两个切片的高度（即 **top** 与 **bottom**），第二个值表示水平方向两侧切片的宽度（即 **left** 和 **right**）。
-- 当指定了**三**个位置（3 个值）时，第一个值表示顶部切片的高度（即 **top**），第二个值表示水平方向两侧切片的宽度（即 **left** 和 **right**），第三个值则表示底部切片的高度（即 **buttom**）。
-- 当指定了**四**个位置（4 个值）时，这四个值则分别对应 **top**、**right**、**buttom**、**left**（上、右、下、左）四个切片的宽度/高度。
+- 当指定了**三**个位置（3 个值）时，第一个值表示顶部切片的高度（即 **top**），第二个值表示水平方向两侧切片的宽度（即 **left** 和 **right**），第三个值则表示底部切片的高度（即 **bottom**）。
+- 当指定了**四**个位置（4 个值）时，这四个值则分别对应 **top**、**right**、**bottom**、**left**（上、右、下、左）四个切片的宽度/高度。
 
 可选值 `fill` 可放在上面声明的值的末尾。
 
@@ -103,12 +105,12 @@ border-image-slice: 30;
 
 <ul>
   <li>
-    <label for="width">slide to adjust <code>border-width</code></label>
+    <label for="width">滑动以调整 <code>border-width</code></label>
     <input type="range" min="10" max="45" id="width" />
     <output id="width-output">30px</output>
   </li>
   <li>
-    <label for="slice">slide to adjust <code>border-image-slice</code></label>
+    <label for="slice">滑动以调整 <code>border-image-slice</code></label>
     <input type="range" min="10" max="45" id="slice" />
     <output id="slice-output">30</output>
   </li>
@@ -175,4 +177,5 @@ sliceSlider.addEventListener("input", () => {
 
 ## 参见
 
-- [图解说明 1 到 4 个值的语法](/zh-CN/docs/Web/CSS/Shorthand_properties#tricky_edge_cases)
+- [图解说明 1 到 4 个值的语法](/zh-CN/docs/Web/CSS/Shorthand_properties#棘手的边界情况)
+- MDN 博客上的 [CSS 中的边框图像：Interop 2023 的关键关注领域](/en-US/blog/border-images-interop-2023/)（2023）