The DropShadow attribute is used to add the shadow effect of an object. It looks like leaving the original object on the page, and then display the projection of the object on the page. Let's take a look at its expression:
| The code is as follows: | Copy code |
| Filter: DropShadow (Color = color, Offx = Offx, Offy = offy, Positive = positive) |
|
This attribute has four parameters: Color indicates the Color of the shadow.
The offset of the shadow in the X and Y directions of Offx and offy respectively. The offset must be set using an integer. If it is set to a positive integer, it indicates the right direction of the x axis and the downward direction of the y axis. If it is set to a negative integer, the opposite is true.
The Positive parameter has two values: True creates a visible projection for any non-transparent pixel, and False creates a visible projection for the transparent pixel part.
Let's take a look at an example (see the figure below ):
Look, the text in the figure is like flying from the page, and leaves a faint shadow.
In fact, the CSS DropShadow attribute is applied here. Let's take a look at its code:
| The code is as follows: | Copy code |
| <Html> <Head> <Title> dropshadow </title> <Style> // * define CSS styles *// <! -- Div {position: absolute; top: 20; width: 300; Filter: dropshadow (color = # FFCCFF, offx = 15, offy = 10, positive = 1 );} --> // * Defines the style within the DIV range, which is absolutely positioned. The color of the projection is # FFCCFF, The projection coordinates are 15 pixels shifted to the right and 10 pixels shifted downward *// </Style> </Head> <Body> <Div> <P style = "font-family: matisse itc; font-size: 64; Font-weight: bold; color: # CC00CC; "> // * Define the font name, size, width, and color *// Love Leaf </p> </Div> </Body> </Html> |
|
Like the chroma attribute, the Dropshadow attribute does not support images very well. I mean JPEG and GIF image files.
The reason is the same as that of Chroma. Because the color of this image is rich, it is difficult to find a place where the shadow is projected.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
