From 581cf1ec59e94d68c54ee104c1d5130790fed58f Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Sat, 24 May 2025 20:41:36 +0800 Subject: [PATCH 01/10] =?UTF-8?q?[zh-CN]=20=E6=A0=B9=E6=8D=AE=E8=8B=B1?= =?UTF-8?q?=E6=96=87=E7=89=88=E8=B0=83=E6=95=B4=20`drop-shadow()`=20?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/filter-function/drop-shadow/index.md | 97 ++++++++++++++----- 1 file changed, 74 insertions(+), 23 deletions(-) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index 3c3678706df4b4..b5336125b44b7b 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/filter-function/drop-shadow {{CSSRef}} -The **`drop-shadow()`** [CSS](/zh-CN/docs/Web/CSS) function applies a drop shadow effect to the input image. Its result is a {{cssxref("<filter-function>")}}. +**`drop-shadow()`** [CSS](/zh-CN/docs/Web/CSS) [函数](docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions)对输入图像应用投影效果。其结果是 {{cssxref("<filter-function>")}}。 {{InteractiveExample("CSS Demo: drop-shadow()")}} @@ -58,41 +58,90 @@ drop-shadow(5px 5px 15px red) /* 可以改变颜色和长度值的顺序 */ /* drop-shadow( ) */ drop-shadow(#e23 0.5rem 0.5rem 1rem) + +/* 向滤镜传入多个 drop-shadow 以叠加 */ +drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow) ``` -The `drop-shadow()` function accepts a parameter of type `` (defined in the {{cssxref("box-shadow")}} property), with the exception that the `inset` keyword is not allowed. +`drop-shadow()` 函数接收一个 `` 类型（在 {{cssxref("box-shadow")}} 属性中定义）的参数，但不允许使用 `inset` 关键字和 `spread` 参数。 -### Parameters +### 参数 -- `offset-x` `offset-y` (required) - - : `offset-x`指定水平距离，其中负值将阴影放置到元素的左侧。`offset-y`指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 `0`，则阴影直接放置在元素后面。 -- `blur-radius` (optional) - - : 阴影的模糊半径，指定为 {{cssxref("<length>")}}。值越大，阴影就越大，也越模糊。如果未指定，则默认为 `0`，从而产生清晰、不模糊的边缘。不允许有负值。 -- `spread-radius` (optional) +- `color` {{optional_inline}} + - : 阴影的颜色。如果未指定，则使用父元素中 {{cssxref("color")}} 属性的值。 - - : 阴影的扩展半径，指定为 {{cssxref("<length>")}}. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为 0，阴影的大小将与输入图像相同。 +- `length` + - : 阴影的偏移长度。此参数接受 2 或 3 个值。如指定 2 个值，则被解释为 ``（水平偏移）和 ``（竖直偏移）值。负的 `` 值将阴影置于元素左侧，负的 `` 值将阴影置于元素上方。如未指定，则使用 `0` 值填充缺失的长度。如指定第 3 个值，则被解释为 ``，表示[高斯模糊](https://zh.wikipedia.org/wiki/高斯模糊)函数的标准差。更大的 `` 值会产生更大、更模糊的阴影。不允许 `` 为负值。 - > [!WARNING] - > 大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止 2020 年 10,14 日，Chrome v.85.0.4183.121（正式版本）,Microsoft Edge Beta v85.0.564.63(64 位), Firefox v.85.0.564.63 暂未支持 +## 正式语法 -- `color` (optional) - - : 阴影的颜色，指定为 {{cssxref("<color>")}}。如果未指定，则使用 {{cssxref("color")}} 属性的值。 +{{CSSSyntax}} -## Examples +## 示例 -```css -/* Black shadow with 10px blur */ -drop-shadow(16px 16px 10px black) +### 设置投影 + +```html +
drop-shadow(16px 16px)
+
drop-shadow(16px 16px red)
+
drop-shadow(red 1rem 1rem 10px)
+
drop-shadow(-16px -16px red)
+
+ drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red) + drop-shadow(-1px -1px red) +
+``` -/* Reddish shadow with 1rem blur and .3rem spread */ -/* WARNING: not generally supported by browsers */ -drop-shadow(.5rem .5rem 1rem .3rem #e23) +```css +div { + display: inline-block; + margin: 0 0.5rem 2rem 1rem; + padding: 0.5rem; + height: 100px; + width: 190px; + vertical-align: top; + background-color: #222; + + color: lime; +} + +div:nth-child(1) { + filter: drop-shadow(16px 16px); +} + +div:nth-child(2) { + filter: drop-shadow(16px 16px red); +} + +div:nth-child(3) { + filter: drop-shadow(red 1rem 1rem 10px); +} + +div:nth-child(4) { + filter: drop-shadow(-16px -16px red); +} + +div:nth-child(5) { + filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red) + drop-shadow(-1px 1px red) drop-shadow(-1px -1px red); +} ``` -## See also +{{EmbedLiveSample("Setting a drop shadow", "100%", "300px")}} + +第一个框中，未指定 `drop-shadow()` 函数的 `` 值，阴影会采用元素自身的 `color` 属性值（`lime`）。第二个和第三个阴影示例表明，长度值和颜色值可以按任意顺序指定。第三个阴影展示了当指定第三个 `` 值时产生的模糊效果。第四个阴影使用负偏移值，使阴影向左上方偏移。第五个示例演示了如何在单个元素上使用多个投影。 + +## 规范 +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +其他可用于 {{cssxref("filter")}} 和 {{cssxref("backdrop-filter")}} 属性值的 {{cssxref("")}} 函数包括： -- {{cssxref("<filter-function>")}} -- CSS {{cssxref("box-shadow")}} property - {{cssxref("filter-function/blur", "blur()")}} - {{cssxref("filter-function/brightness", "brightness()")}} - {{cssxref("filter-function/contrast", "contrast()")}} @@ -102,3 +151,5 @@ drop-shadow(.5rem .5rem 1rem .3rem #e23) - {{cssxref("filter-function/opacity", "opacity()")}} - {{cssxref("filter-function/saturate", "saturate()")}} - {{cssxref("filter-function/sepia", "sepia()")}} +- {{cssxref("box-shadow")}} 属性 +- {{cssxref("text-shadow")}} 属性 From fe4744bd82135080fbbb1d35fea7bb39f11b4b0e Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Sat, 24 May 2025 20:47:53 +0800 Subject: [PATCH 02/10] Update files/zh-cn/web/css/filter-function/drop-shadow/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index b5336125b44b7b..ae4acb4a32d721 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -68,6 +68,7 @@ drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow) ### 参数 - `color` {{optional_inline}} + - : 阴影的颜色。如果未指定，则使用父元素中 {{cssxref("color")}} 属性的值。 - `length` From 02a2b0e0034027db127196fb1fbfeb4f7cf9f3b7 Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Sat, 24 May 2025 20:48:00 +0800 Subject: [PATCH 03/10] Update files/zh-cn/web/css/filter-function/drop-shadow/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index ae4acb4a32d721..7044cdd6913052 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -133,6 +133,7 @@ div:nth-child(5) { 第一个框中，未指定 `drop-shadow()` 函数的 `` 值，阴影会采用元素自身的 `color` 属性值（`lime`）。第二个和第三个阴影示例表明，长度值和颜色值可以按任意顺序指定。第三个阴影展示了当指定第三个 `` 值时产生的模糊效果。第四个阴影使用负偏移值，使阴影向左上方偏移。第五个示例演示了如何在单个元素上使用多个投影。 ## 规范 + {{Specifications}} ## 浏览器兼容性 From 8458b70ad17c53f156b08d92ea0fbc7c96c217ef Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Sun, 25 May 2025 11:27:58 +0800 Subject: [PATCH 04/10] Update index.md --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index 7044cdd6913052..14e4eca8f94d44 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -142,6 +142,7 @@ div:nth-child(5) { ## 参见 + 其他可用于 {{cssxref("filter")}} 和 {{cssxref("backdrop-filter")}} 属性值的 {{cssxref("")}} 函数包括： - {{cssxref("filter-function/blur", "blur()")}} From ffdd7c2b9ece13699ec37a8c5d632a7262931049 Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Sun, 25 May 2025 19:18:20 +0800 Subject: [PATCH 05/10] Update files/zh-cn/web/css/filter-function/drop-shadow/index.md Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index 14e4eca8f94d44..f430f0ea2c086c 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -143,7 +143,7 @@ div:nth-child(5) { ## 参见 -其他可用于 {{cssxref("filter")}} 和 {{cssxref("backdrop-filter")}} 属性值的 {{cssxref("")}} 函数包括： +其他可用于 {{cssxref("filter")}} 和 {{cssxref("backdrop-filter")}} 属性值的 {{cssxref("<filter-function>")}} 函数包括： - {{cssxref("filter-function/blur", "blur()")}} - {{cssxref("filter-function/brightness", "brightness()")}} From e52682d2f30011bc03f86797922bca2eb293b6b7 Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Sun, 25 May 2025 19:20:46 +0800 Subject: [PATCH 06/10] Update files/zh-cn/web/css/filter-function/drop-shadow/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index f430f0ea2c086c..c0a0219f8e2306 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -143,6 +143,7 @@ div:nth-child(5) { ## 参见 + 其他可用于 {{cssxref("filter")}} 和 {{cssxref("backdrop-filter")}} 属性值的 {{cssxref("<filter-function>")}} 函数包括： - {{cssxref("filter-function/blur", "blur()")}} From c2f9f0c63d86be4c7ec36ee40e2ad27855cca1db Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Mon, 26 May 2025 10:00:23 +0800 Subject: [PATCH 07/10] Update files/zh-cn/web/css/filter-function/drop-shadow/index.md Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index c0a0219f8e2306..d710899aaf9ed7 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -74,7 +74,7 @@ drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow) - `length` - : 阴影的偏移长度。此参数接受 2 或 3 个值。如指定 2 个值，则被解释为 ``（水平偏移）和 ``（竖直偏移）值。负的 `` 值将阴影置于元素左侧，负的 `` 值将阴影置于元素上方。如未指定，则使用 `0` 值填充缺失的长度。如指定第 3 个值，则被解释为 ``，表示[高斯模糊](https://zh.wikipedia.org/wiki/高斯模糊)函数的标准差。更大的 `` 值会产生更大、更模糊的阴影。不允许 `` 为负值。 -## 正式语法 +## 形式语法 {{CSSSyntax}} From af0ed3b72c6c3a8031b9e83d93e18d86f165153f Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Mon, 26 May 2025 10:00:34 +0800 Subject: [PATCH 08/10] Update files/zh-cn/web/css/filter-function/drop-shadow/index.md Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index d710899aaf9ed7..aa44bfad17365a 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -128,7 +128,7 @@ div:nth-child(5) { } ``` -{{EmbedLiveSample("Setting a drop shadow", "100%", "300px")}} +{{EmbedLiveSample("设置投影", "100%", "300px")}} 第一个框中，未指定 `drop-shadow()` 函数的 `` 值，阴影会采用元素自身的 `color` 属性值（`lime`）。第二个和第三个阴影示例表明，长度值和颜色值可以按任意顺序指定。第三个阴影展示了当指定第三个 `` 值时产生的模糊效果。第四个阴影使用负偏移值，使阴影向左上方偏移。第五个示例演示了如何在单个元素上使用多个投影。 From 328f760f7f27326bb3cfe8bc2c70a0a3263dd62d Mon Sep 17 00:00:00 2001 From: EienMiku <108218610+EienMiku@users.noreply.github.com> Date: Mon, 26 May 2025 10:03:35 +0800 Subject: [PATCH 09/10] Update index.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复不慎忽视的错误 --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index aa44bfad17365a..93e570e428b78a 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -130,7 +130,7 @@ div:nth-child(5) { {{EmbedLiveSample("设置投影", "100%", "300px")}} -第一个框中，未指定 `drop-shadow()` 函数的 `` 值，阴影会采用元素自身的 `color` 属性值（`lime`）。第二个和第三个阴影示例表明，长度值和颜色值可以按任意顺序指定。第三个阴影展示了当指定第三个 `` 值时产生的模糊效果。第四个阴影使用负偏移值，使阴影向左上方偏移。第五个示例演示了如何在单个元素上使用多个投影。 +第一个盒子中，未指定 `drop-shadow()` 函数的 `` 值，阴影会采用元素自身的 `color` 属性值（`lime`）。第二个和第三个阴影示例表明，长度值和颜色值可以按任意顺序指定。第三个阴影展示了当指定第三个 `` 值时产生的模糊效果。第四个阴影使用负偏移值，使阴影向左上方偏移。第五个示例演示了如何在单个元素上使用多个投影。 ## 规范 @@ -142,8 +142,6 @@ div:nth-child(5) { ## 参见 - - 其他可用于 {{cssxref("filter")}} 和 {{cssxref("backdrop-filter")}} 属性值的 {{cssxref("<filter-function>")}} 函数包括： - {{cssxref("filter-function/blur", "blur()")}} From 352427836227b26d88ef7d862b20053944b67d78 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Mon, 26 May 2025 12:26:21 +0800 Subject: [PATCH 10/10] minor edit --- files/zh-cn/web/css/filter-function/drop-shadow/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index 93e570e428b78a..a4c45990dd39c3 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -1,6 +1,8 @@ --- title: drop-shadow() slug: Web/CSS/filter-function/drop-shadow +l10n: + sourceCommit: 429d45679a29f386af0ddfcf2a64498843c3e1e5 --- {{CSSRef}} @@ -34,7 +36,7 @@ filter: drop-shadow(0 0 0.75rem crimson); 投影实际上是输入图像的 alpha 蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。 > [!NOTE] -> 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性。`box-shadow` 属性在元素的整个框后面创建一个矩形阴影，而 `drop-shadow()` 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。 +> 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性。`box-shadow` 属性在元素的整个盒子后面创建一个矩形阴影，而 `drop-shadow()` 滤镜函数则是创建一个符合图像*本身*形状（alpha 通道）的阴影。 ## 语法