fix(css): update 'drop-shadow()' page

files/en-us/web/css/box-shadow/index.md

@@ -21,21 +21,25 @@ The `box-shadow` property enables you to cast a drop shadow from the frame of al
 /* Keyword values */
 box-shadow: none;
 
-/* offset-x | offset-y | color */
-box-shadow: 60px -16px teal;
+/* A color and two length values */
+/* <color> | <length> | <length> */
+box-shadow: red 60px -16px;
 
-/* offset-x | offset-y | blur-radius | color */
+/* Three length values and a color */
+/* <length> | <length> | <length> | <color> */
 box-shadow: 10px 5px 5px black;
 
-/* offset-x | offset-y | blur-radius | spread-radius | color */
+/* Four length values and a color */
+/* <length> | <length> | <length> | <length> | <color> */
 box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 
-/* inset | offset-x | offset-y | color */
+/* inset, length values, and a color */
+/* <inset> | <length> | <length> | <color> */
 box-shadow: inset 5em 1em gold;
 
 /* Any number of shadows, separated by commas */
 box-shadow:
-  3px 3px red,
+  3px 3px red inset,
   -1em 0 0.4em olive;
 
 /* Global values */
@@ -61,28 +65,25 @@ To specify multiple shadows, provide a comma-separated list of shadows.
 
 ### Values
 
-- `inset`
-  - : If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
-    The presence of the `inset` keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
-- `<offset-x>`
-  - : The {{cssxref("&lt;length&gt;")}} value specifies the horizontal distance. Negative values place the shadow to the left of the element.
-- `<offset-y>`
+- `<color>` {{optional_inline}}
 
-  - : The {{cssxref("&lt;length&gt;")}} values specifies the vertical distance. Negative values place the shadow above the element.
+  - : Specifies color for the shadow. See {{cssxref("&lt;color&gt;")}} values for possible keywords and notations.
+    If not specified, the value of the {{cssxref("color")}} property defined in the parent element is used.
 
-    If both `<offset-x>` and `<offset-y>` are set to `0`, the shadow is placed behind the element (and may generate a blur effect if `<blur-radius>` and/or `<spread-radius>` is set).
+- `<length>`
 
-- `<blur-radius>`
+  - : Specifies the offset length of the shadow. This parameter accepts two, three, or four values. Third and fourth values are optional. They are interpreted as follows:
 
-  - : This is a third {{cssxref("&lt;length&gt;")}} value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be `0` (the shadow's edge is sharp). The specification does not include an exact algorithm for how the blur radius should be calculated, however, it does elaborate as follows:
+    - If two values are specified, they are interpreted as `<offset-x>` (horizontal offset) and `<offset-y>` (vertical offset) values. Negative `<offset-x>` value places the shadow to the left of the element. Negative `<offset-y>` value places the shadow above the element.\
+      If not specified, the value of `0` is used for the missing length. If both `<offset-x>` and `<offset-y>` are set to `0`, the shadow is placed behind the element (and may generate a blur effect if `<blur-radius>` and/or `<spread-radius>` is set).
+    - If three values are specified, the third value is interpreted as `<blur-radius>`. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be set to`0` (meaning that the shadow's edge will be sharp). The specification does not include an exact algorithm for how the blur radius should be calculated; however, it does elaborate as follows:
 
-    > …for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow's edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
+      > …for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow's edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
 
-- `<spread-radius>`
-  - : This is a fourth {{cssxref("&lt;length&gt;")}} value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be `0` (the shadow will be the same size as the element).
-- `<color>`
-  - : See {{cssxref("&lt;color&gt;")}} values for possible keywords and notations.
-    If not specified, it defaults to {{cssxref("&lt;color&gt;","currentcolor","#currentcolor_keyword")}}.
+    - If four values are specified, the fourth value is interpreted as `<spread-radius>`. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be set to `0` (that is, the shadow will be the same size as the element).
+
+- `inset` {{optional_inline}}
+  - : Changes the shadow from an outer box-shadow to an inner box-shadow (as if the content is pressed into the box). Inset shadows are drawn inside the box's border (even if the border is transparent), and they appear above the background but below the content. By default, the shadow behaves like a drop shadow, giving the appearance that the box is elevated above its content. This is the default behavior when `inset` is not specified.
 
 ### Interpolation
 
@@ -124,9 +125,9 @@ In this example, we include three shadows: an inset shadow, a regular drop shado
 blockquote {
   padding: 20px;
   box-shadow:
-    inset 0 -3em 3em rgba(0, 0, 0, 0.1),
-    0 0 0 2px rgb(255, 255, 255),
-    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
+    inset 0 -3em 3em rgba(0, 200, 0, 0.3),
+    0 0 0 2px white,
+    0.3em 0.3em 1em rgba(200, 0, 0, 0.6);
 }
 ```
 

files/en-us/web/css/filter-function/drop-shadow/index.md

@@ -18,38 +18,87 @@ A drop shadow is effectively a blurred, offset version of the input image's alph
 ## Syntax
 
 ```css
-drop-shadow(offset-x offset-y blur-radius color)
+/* Two length values */
+/* drop-shadow( <length> <length> ) */
+drop-shadow(5px 5px)
+
+/* Three length values */
+/* drop-shadow( <length> <length> <length> ) */
+drop-shadow(5px 5px 15px)
+
+/* Two length values and a color */
+/* drop-shadow( <length> <length> <color> ) */
+drop-shadow(5px 5px red)
+
+/* Three length values and a color */
+/* drop-shadow( <length> <length> <length> <color> ) */
+drop-shadow(5px 5px 15px red)
+
+/* The order of color and length values can be changed */
+/* drop-shadow( <color> <length> <length> <length> ) */
+drop-shadow(#e23 0.5rem 0.5rem 1rem)
 ```
 
 The `drop-shadow()` function accepts a parameter of type `<shadow>` (defined in the {{cssxref("box-shadow")}} property), with the exception that the `inset` keyword and `spread` parameters are not allowed.
 
 ### Parameters
 
-- `offset-x` (required)
-  - : The horizontal offset for the shadow, specified as a {{cssxref("&lt;length&gt;")}} value. Negative values place the shadow to the left of the element.
-- `offset-y` (required)
-  - : The vertical offset for the shadow, specified as a {{cssxref("&lt;length&gt;")}} value. Negative values place the shadow above the element.
-- `blur-radius` (optional)
-  - : The shadow's blur radius, specified as a {{cssxref("&lt;length&gt;")}}. The larger the value, the larger and more blurred the shadow becomes. If unspecified, it defaults to `0`, resulting in a sharp, unblurred edge. Negative values are not allowed.
-- `color` (optional)
-  - : The color of the shadow, specified as a {{cssxref("&lt;color&gt;")}}. If unspecified, the value of the {{cssxref("color")}} property is used.
+- `<color>` {{optional_inline}}
+
+  - : Specifies the color for the shadow. If not specified, the value of the {{cssxref("color")}} property defined in the parent element is used.
+
+- `<length>`
+  - : Specifies the offset length of the shadow. This parameter accepts two or three values. If two values are specified, they are interpreted as `<offset-x>` (horizontal offset) and `<offset-y>` (vertical offset) values. Negative `<offset-x>` value places the shadow to the left of the element. Negative `<offset-y>` value places the shadow above the element. If not specified, the value of `0` is used for the missing length. If a third value is specified, it is interpreted as `<standard-deviation>`, which is the value of the standard deviation to the [Gaussian blur](https://en.wikipedia.org/wiki/Gaussian_blur) function. A larger `<standard-deviation>` value creates a larger and more blurred shadow. Negative values for `<standard-deviation>` are not allowed.
+
+## Formal syntax
+
+{{CSSSyntax}}
 
 ## Examples
 
-### Setting a drop shadow using pixel offsets and blur radius
+### Setting a drop shadow
 
-```css
-/* Black shadow with 10px blur */
-drop-shadow(16px 16px 10px black)
+```html
+<div>drop-shadow(16px 16px)</div>
+<div>drop-shadow(16px 16px red)</div>
+<div>drop-shadow(red 1rem 1rem 10px)</div>
+<div>drop-shadow(-16px -16px red)</div>
 ```
 
-### Setting a drop shadow using rem offsets and blur radius
-
 ```css
-/* Reddish shadow with 1rem blur */
-drop-shadow(.5rem .5rem 1rem #e23)
+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 -6px red);
+}
 ```
 
+{{EmbedLiveSample("Setting a drop shadow", "100%", "300px")}}
+
+In the absence of a `<color>` value in the `drop-shadow()` function in the first box, the shadow uses the value of the `color` property from the element (`lime`). The second and third shadows illustrate that the length and color values can be specified in any order. The third shadow shows the blurring effect when a third `<length>` value is specified. The fourth shadow uses negative offsets which shifts shadow to the left and top.
+
 ## Specifications
 
 {{Specifications}}