CSS3图片采用阴影元素的像素drop-shadow()方法与box-shadow不同

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 */

f23-mandrilldrop1.jpg f24-mandrillshadow2.jpg

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:

giraffe dropshadow.png

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.

filter dropshadow.png

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&quot; class="foo" />
    <img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png&quot; class="foo bar" />
  </body>
  </body>
</html>

You may also like...

发表评论