drop-shadow()
CSS
function
applies a drop shadow effect to the input image. Its result is a
<filter-function>
.
A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.
注意：
This function is somewhat similar to the
box-shadow
property. The
box-shadow
property creates a rectangular shadow behind an element's
entire box
, while the
drop-shadow()
filter function creates a shadow that conforms to the shape (alpha channel) of the
image itself
.
drop-shadow(offset-x offset-y blur-radius color)
drop-shadow()
function accepts a parameter of type
<shadow>
(defined in the
box-shadow
property), with the exception that the
inset
keyword and
spread
parameters are not allowed.
offset-x
offset-y
(required)
<length>
values that determine the shadow offset.
offset-x
specifies the horizontal distance, where negative values place the shadow to the left of the element.
offset-y
specifies the vertical distance, where negative values place the shadow above the element. If both values are
0
, the shadow is placed directly behind the element.
blur-radius
(optional)
<length>
. 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)
<color>
. If unspecified, the value of the
color
property is used.
/* Black shadow with 10px blur */ drop-shadow(16px 16px 10px black)
/* Reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23)
| 规范 | 状态 |
|---|---|
|
Filter Effects Module Level 1
The definition of 'drop-shadow()' in that specification. |
工作草案 |
<filter-function>
box-shadow
property
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()