[zh-cn] sync translated content (#23405)

* zh-cn: sync translated content * fix(css): new pages for <url> and url() ref: mdn/content#35486 --------- Co-authored-by: allo <yin199909@aliyun.com>
mdn · Sep 5, 2024 · 02b1e89 · 02b1e89
1 parent 6b20ae4
commit 02b1e89
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 49 deletions.
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
@@ -2202,7 +2202,8 @@
 /zh-CN/docs/Web/CSS/transform-function/translate3d()	/zh-CN/docs/Web/CSS/transform-function/translate3d
 /zh-CN/docs/Web/CSS/transform-function/translateX()	/zh-CN/docs/Web/CSS/transform-function/translateX
 /zh-CN/docs/Web/CSS/transform-function/translateY()	/zh-CN/docs/Web/CSS/transform-function/translateY
-/zh-CN/docs/Web/CSS/url()	/zh-CN/docs/Web/CSS/url
+/zh-CN/docs/Web/CSS/url	/zh-CN/docs/Web/CSS/url_value
+/zh-CN/docs/Web/CSS/url()	/zh-CN/docs/Web/CSS/url_function
 /zh-CN/docs/Web/CSS/var()	/zh-CN/docs/Web/CSS/var
 /zh-CN/docs/Web/CSS/word-wrap	/zh-CN/docs/Web/CSS/overflow-wrap
 /zh-CN/docs/Web/CSS/偏移	/zh-CN/docs/Web/CSS/offset

diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
@@ -20661,7 +20661,7 @@
       "LiNengNeng"
     ]
   },
-  "Web/CSS/url": {
+  "Web/CSS/url_function": {
     "modified": "2019-03-23T22:25:44.664Z",
     "contributors": ["zhyupe"]
   },

diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md
@@ -2,7 +2,7 @@
 title: CanvasRenderingContext2D：filter 属性
 slug: Web/API/CanvasRenderingContext2D/filter
 l10n:
-  sourceCommit: c0f1aecaed48d75652c6dd97f30c7febd07e5cde
+  sourceCommit: 592bea250bec05a3b641b0372cb7eddfd24616fb
 ---
 
 {{APIRef}}
@@ -13,8 +13,8 @@ Canvas 2D API 的 **`CanvasRenderingContext2D.filter`** 属性是用来提供模
 
 `filter` 属性接受字符串形式的值，可以是 `"none"`，或者是以下一个或多个滤镜函数。
 
-- [`url()`](/zh-CN/docs/Web/CSS/url)
-  - : 一个 CSS {{cssxref("url", "url()")}}。接受一个指向 SVG 滤镜元素（可以被嵌入在外部的 XML 文件中）的 IRI。
+- [`url()`](/zh-CN/docs/Web/CSS/url_function)
+  - : 一个 CSS {{cssxref("url_function", "url()")}}。接受任意一个可以解析为 SVG 滤镜元素的 URL。其可以是元素的 ID、外部 XML 文件的路径，甚至是一个数据 URL 编码的 SVG 值。
 - [`blur()`](/zh-CN/docs/Web/CSS/filter-function/blur)
   - : 一个 CSS {{cssxref("&lt;length&gt;")}}。将高斯模糊应用于绘图。它定义了高斯函数的标准偏差值，即屏幕上多少像素混合在一起；因此，较大的值会产生更模糊的效果。值为 `0` 时保持输入不变。
 - [`brightness()`](/zh-CN/docs/Web/CSS/filter-function/brightness)

diff --git a/files/zh-cn/web/css/background-image/index.md b/files/zh-cn/web/css/background-image/index.md
@@ -118,4 +118,4 @@ div {
   - {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
   - {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
   - {{cssxref("image/paint", "paint()")}}
-  - {{cssxref("url", "url()")}}
+  - {{cssxref("url_value", "&lt;url&gt;")}}
diff --git a/files/zh-cn/web/css/border-image-source/index.md b/files/zh-cn/web/css/border-image-source/index.md
@@ -2,7 +2,7 @@
 title: border-image-source
 slug: Web/CSS/border-image-source
 l10n:
-  sourceCommit: fb3ef3857ca1d77cc720deba0c12d7a3313b85b4
+  sourceCommit: 5178e1e7c9edf0c9c652275ae62f090042ce2422
 ---
 
 {{CSSRef}}
@@ -70,5 +70,5 @@ border-image-source: unset;
 - {{cssxref("outline")}}
 - {{cssxref("box-shadow")}}
 - {{cssxref("background-image")}}
-- {{cssxref("url", "url()")}} 函数
+- {{cssxref("url_value", "&lt;url&gt;")}} 类型
 - MDN 博客：[CSS 中的边框图像：Interop 2023 的重点关注领域](/en-US/blog/border-images-interop-2023/)（2023）
diff --git a/files/zh-cn/web/css/border-image/index.md b/files/zh-cn/web/css/border-image/index.md
@@ -152,6 +152,6 @@ border-image: unset;
 - {{cssxref("outline")}}
 - {{cssxref("box-shadow")}}
 - {{cssxref("background-image")}}
-- {{cssxref("url", "url()")}} 函数
+- {{cssxref("url_value", "&lt;url&gt;")}} 类型
 - 渐变函数：{{CSSxRef("gradient/conic-gradient", "conic-gradient()")}}、{{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}、{{CSSxRef("gradient/linear-gradient", "linear-gradient()")}}、{{CSSxRef("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}、{{CSSxRef("gradient/radial-gradient", "radial-gradient()")}}、{{CSSxRef("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
 - MDN 博客（2023）[CSS 中的边框图像：Interop 2023 的重点关注领域](/en-US/blog/border-images-interop-2023/)
diff --git a/files/zh-cn/web/css/clip-path/index.md b/files/zh-cn/web/css/clip-path/index.md
@@ -52,7 +52,7 @@ clip-path: unset;
 ### 取值
 
 - `<clip-source>`
-  - : 用 {{cssxref("url", "url()")}} 引用 [SVG](/zh-CN/docs/Web/SVG) 的 {{SVGElement("clipPath")}} 元素
+  - : 用 {{cssxref("url_value", "&lt;url&gt;")}} 引用 [SVG](/zh-CN/docs/Web/SVG) 的 {{SVGElement("clipPath")}} 元素
 - {{cssxref("&lt;basic-shape&gt;")}}
 
   - : 一种形状，其大小和位置由 `<geometry-box>` 的值定义。如果没有指定 `<geometry-box>`，则将使用 `border-box` 用为参考框。取值可为以下值中的任意一个：

diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/index.md b/files/zh-cn/web/css/css_backgrounds_and_borders/index.md
@@ -2,7 +2,7 @@
 title: CSS 背景和边框
 slug: Web/CSS/CSS_backgrounds_and_borders
 l10n:
-  sourceCommit: 8d4fb1e2934111a13989d2796152dc601468e7b5
+  sourceCommit: 5178e1e7c9edf0c9c652275ae62f090042ce2422
 ---
 
 {{CSSRef}}
@@ -116,13 +116,13 @@ box-shadow 包括内阴影和外阴影、单个或多个阴影，以及实心或
 - {{cssxref("border-start-start-radius")}} 属性
 - {{cssxref("border-start-end-radius")}} 属性
 - {{cssxref("border-end-start-radius")}} 属性
-- {{cssxref("border-end-end-radius ")}} 属性
+- {{cssxref("border-end-end-radius")}} 属性
 
 - {{cssxref("box-sizing")}} 属性
 - {{cssxref("box-decoration-break")}} 属性
 - {{cssxref("text-shadow")}} 属性
 
-- {{cssxref("url", "url()")}} CSS 函数
+- {{cssxref("url_value", "&lt;url&gt;")}} CSS 类型
 - [`<color>`](/zh-CN/docs/Web/CSS/color) 数据类型
 - [`<image>`](/zh-CN/docs/Web/CSS/image) 数据类型
 - [`<position>`](/zh-CN/docs/Web/CSS/position) 数据类型

diff --git a/files/zh-cn/web/css/css_functions/index.md b/files/zh-cn/web/css/css_functions/index.md
@@ -224,7 +224,7 @@ selector {
 ### 图像函数
 
 - {{CSSxRef("image/image","image()")}} {{Experimental_Inline}}
-  - : 定义一个 {{CSSxRef("&lt;image&gt;")}}，与 {{CSSxRef("url", "url()")}} 函数类似，但增加了一些功能，包括指定图片的方向性和首选图片不被支持时的后备图片。
+  - : 定义一个 {{CSSxRef("&lt;image&gt;")}}，与 {{CSSxRef("url_value", "&lt;url&gt;")}} 类型类似，但增加了一些功能，包括指定图片的方向性和首选图片不被支持时的后备图片。
 - {{CSSxRef("image/image-set","image-set()")}}
   - : 从一组给定的 CSS 图片中挑选最合适的图片，主要用于高像素密度的屏幕。
 - {{CSSxRef("cross-fade", "cross-fade()")}}
@@ -268,7 +268,7 @@ CSS 计数器函数通常与 {{CSSxRef("content")}} 属性一起使用，不过
   - : 使用定义在 HTML 元素上的属性值。
 - {{CSSxRef("env", "env()")}}
   - : 使用用户代理定义的环境变量。
-- {{CSSxRef("url", "url()")}}
+- {{CSSxRef("url_value", "&lt;url&gt;")}}
   - : 使用指定 URL 定义的文件。
 - {{CSSxRef("var", "var()")}}
   - : 使用自定义属性值，而不是其他属性值的任何部分。

diff --git a/files/zh-cn/web/css/mask-image/index.md b/files/zh-cn/web/css/mask-image/index.md
@@ -37,7 +37,7 @@ mask-image: unset;
 - `none`
   - : 默认值，透明的黑色图像层，也就是没有遮罩层。
 - `<mask-source>`
-  - : 对 {{SVGElement("mask")}} 或 CSS 图像的 {{cssxref("url","url()")}} 引用
+  - : 一个引用了 {{SVGElement("mask")}} 或 CSS 图像的 {{cssxref("url_value", "&lt;url&gt;")}}。
 - {{cssxref("&lt;image&gt;")}}
   - : 用作蒙版图像层的图像值。
 

diff --git a/files/zh-cn/web/css/url/index.md → files/zh-cn/web/css/url_function/index.md b/files/zh-cn/web/css/url/index.md → files/zh-cn/web/css/url_function/index.md
@@ -1,8 +1,8 @@
 ---
 title: url()
-slug: Web/CSS/url
+slug: Web/CSS/url_function
 l10n:
-  sourceCommit: 875d97804293021faaf66c16a76e2f31a6df56e1
+  sourceCommit: b6f6c10c9c3a73e8a1f1c7bc643b44b2521cb234
 ---
 
 {{CSSRef}}
@@ -15,9 +15,11 @@ l10n:
 
 ```css
 /* 简单用法 */
+url("https://example.com/images/myImg.jpg");
+url('https://example.com/images/myImg.jpg');
 url(https://example.com/images/myImg.jpg);
-url(data:image/png;base64,iRxVB0…);
-url(myFont.woff);
+url("data:image/jpg;base64,iRxVB0…");
+url(myImg.jpg);
 url(#IDofSVGpath);
 
 /* 相关属性 */
@@ -52,7 +54,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
 
 如果使用相对 URL，它是相对于样式表的 URL（而不是相对于网页的 URL）。
 
-**`url()`** 函数可以用作 {{cssxref('background')}}、{{cssxref('background-image')}}、{{cssxref('border')}}、{{cssxref('border-image')}}、{{cssxref('border-image-source')}}、{{cssxref('content')}}、{{cssxref('cursor')}}、{{cssxref('filter')}}、{{cssxref('list-style')}}、{{cssxref('list-style-image')}}、{{cssxref('mask')}}、{{cssxref('mask-image')}}、{{cssxref('offset-path')}}、{{cssxref('clip-path')}} 的值，作为 [@font-face](/zh-CN/docs/Web/CSS/@font-face) 块的一部分的 [src](/zh-CN/docs/Web/CSS/@font-face/src)，以及 [@counter-style/symbol](/zh-CN/docs/Web/CSS/@counter-style/symbols)。
+**`url()`** 函数可以用作 {{cssxref('background')}}、{{cssxref('background-image')}}、{{cssxref('border')}}、{{cssxref('border-image')}}、{{cssxref('border-image-source')}}、{{cssxref('content')}}、{{cssxref('cursor')}}、{{cssxref('filter')}}、{{cssxref('list-style')}}、{{cssxref('list-style-image')}}、{{cssxref('mask')}}、{{cssxref('mask-image')}}、{{cssxref('offset-path')}}、{{cssxref('clip-path')}} 的值，作为 [`@font-face`](/zh-CN/docs/Web/CSS/@font-face) 块的一部分的 [src](/zh-CN/docs/Web/CSS/@font-face/src)，以及 [@counter-style/`symbol`](/zh-CN/docs/Web/CSS/@counter-style/symbols)。
 
 ## 语法
 
@@ -62,7 +64,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
 
   - : 可以指定一个 URL 或 SVG 形状的 ID 的字符串。
 
-    - \<url>
+    - url
 
       - : 为相对地址、绝对地址的 URL，或指向所包含的 web 资源的指针，或数据 URL，可选择使用单引号或双引号。如果 URL 包含括号、空白字符或引号（除非这些字符已转义），或者地址包含高于 0x7e 的控制字符，则需要使用引号。除非经过转义，否则双引号不能出现在双引号内，单引号不能出现在单引号内。以下内容均有效且等效：
 
@@ -75,10 +77,10 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
         如果选择不使用引号编写 URL，请在 URL 中的任何括号、空白字符、单引号（`'`）和双引号（`"`）前使用反斜线（`\`）。
 
     - path
-      - : 引用 [SVG 形状](/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes)（`circle`、`ellipse`、`line`、`path`、`polygon`、`polyline` 或 `rect`）的 ID ——使用形状的几何体作为路径。
+      - : 引用 [SVG 形状](/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes)或 [SVG 滤镜](/zh-CN/docs/Web/SVG/Element/filter)的 ID。
 
 - `<url-modifier>`
-  - 将来，`url()` 函数可能会支持指定修饰符、标识符或函数标记，从而改变 URL 字符串的含义。本规范不支持此特性，也未对其进行全面定义。
+  - : 将来，`url()` 函数可能会支持指定修饰符、标识符或函数标记，从而改变 URL 字符串的含义。本规范不支持此特性，也未对其进行全面定义。
 
 ### 形式语法
 
@@ -88,39 +90,61 @@ url( <string> <url-modifier>* )
 
 ## 示例
 
-### 在 background 属性中使用的 url
+### 作为 background 属性的值
 
 ```css
-.topbanner {
-  background: url("topbanner.png") #00d no-repeat fixed;
+body {
+  background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
+    #00d no-repeat fixed;
 }
 ```
 
-### 作为列表项目符号加载图像的 url
+{{EmbedLiveSample("作为 background 属性的值", "100%", "200")}}
+
+### 将图像设置为列表项目符号
+
+```html hidden
+<ul>
+  <li>一</li>
+  <li>二</li>
+  <li>三</li>
+</ul>
+```
+
+```css hidden
+ul {
+  font-size: 3rem;
+  margin: 0;
+}
+```
 
 ```css
 ul {
-  list-style: square url(http://www.example.com/redball.png);
+  list-style: outside
+    url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
 }
 ```
 
+{{EmbedLiveSample("将图像设置为列表符号", "100%", "200")}}
+
 ### 内容属性中的用法
 
 #### HTML
 
 ```html
 <ul>
-  <li>第 1 项</li>
-  <li>第 2 项</li>
-  <li>第 3 项</li>
+  <li>一</li>
+  <li>二</li>
+  <li>三</li>
 </ul>
 ```
 
 #### CSS
 
 ```css
 li::after {
-  content: " - " url(star.gif);
+  content: "——"
+    url("https://mdn.github.io/shared-assets/images/examples/star-white_16x16.png");
 }
 ```
 
@@ -130,30 +154,17 @@ li::after {
 
 ### 使用数据 URL
 
-#### HTML
-
-```html
-<div class="background"></div>
-```
-
 #### CSS
 
-```css hidden
-.background {
-  height: 100vh;
-}
-```
-
 ```css
-.background {
-  background: yellow;
+body {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
 }
 ```
 
-{{EmbedLiveSample("使用数据 URL", "100%", 50)}}
+{{EmbedLiveSample("使用数据 URL", "100%", 100)}}
 
-### 在滤镜中的使用
+### 在滤镜中的用法
 
 当 URL 被用作滤镜路径时，URL 必须是以下其中之一：
 

diff --git a/files/zh-cn/web/css/url_value/index.md b/files/zh-cn/web/css/url_value/index.md
@@ -0,0 +1,33 @@
+---
+title: <url>
+slug: Web/CSS/url_value
+l10n:
+  sourceCommit: 5178e1e7c9edf0c9c652275ae62f090042ce2422
+---
+
+{{CSSRef}}
+
+**`<url>`** [CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types)是指向资源的指针。资源可以是图像、视频、CSS 文件、字体文件、SVG 特性等。
+
+## 语法
+
+```plain
+<url> = <url()> | <src()>
+```
+
+### 值
+
+其值可以为以下任意一种：
+
+- [`<url()>`](/zh-CN/docs/Web/CSS/url_function)
+  - : `url()` 函数只接受 URL 字面字符串（带引号或不带引号）。
+- `<src()>`
+  - : 此函数可以接受 URL 字符串或 [CSS 变量](/zh-CN/docs/Web/CSS/var)。
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- {{cssxref("url_function", "url()")}}