Summary
Applies a shadow to an element’s pixels, for use by the filter property. Accepts up to 3 distance measurements, representing x/y offset and blur radius, along with a color value.
This CSS property value is reflected in the following images:
filter: drop-shadow(16px 16px 20px black); /* left */ filter: drop-shadow(10px -16px 30px purple); /* right */
Setting offsets to 0 with a positive blur value produces a backlit halo effect. Setting blur to 0 and positive offset values produces a raised effect as if sunlight is falling on the element. The drop-shadow() function uses the same syntax as the text-shadow CSS property, and likewise allows for more than one set of shadow values, separated with commas. This example renders both of the shadows shown above:
filter: drop-shadow(16px 16px 20px black, 10px -16px 30px purple);
The filter affects the contours of image transparencies, which allows for more vivid shadow effects:
Compatibility
There is no data available for topic “css”, feature “drop-shadow”. If you think that there should be data available, consider opening an issue.
Examples
View live exampleThe below example shows the difference between the CSS box-shadow property and the drop-shadow filter function. Where the box-shadow property outlines the html box and the drop-shadow outlines the element parts.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Filter example</title>
<style>
.foo {
width: 100px;
padding: 50px 0;
margin: 100px;
text-align: center;
border: dashed 10px red;
float: left;
}
.bar {
box-shadow: 5px 5px 10px black;
}
.baz {
-webkit-filter: drop-shadow(5px 5px 10px black);
}
</style>
</head>
<body>
<div class="foo bar"></div>
<div class="foo baz"></div>
</body>
</html>
View live exampleThis example shows the difference when using png images with transparency.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Filter example</title>
<style>
.foo {
float: left;
}
.bar {
box-shadow: 5px 5px 10px black;
}
.baz {
-webkit-filter: drop-shadow(5px 5px 10px black);
}
</style>
</head>
<body>
<img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png" class="foo" />
<img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png" class="foo bar" />
</body>
</body>
</html>
近期评论