Filter:shadow (color=color,direction=direction)
Here, the shadow has two parameter values: The color parameter is used to specify the shadow of the projection, and the direction parameter is used to specify the direction of the projection.
The directions here are the same as the "direction and angle relationship" we mentioned in the second section of the Blur attribute. Perhaps you would ask, what is the difference between the DropShadow attribute and the shadow attribute mentioned earlier?
It's hard to understand what you're saying, so let's take a look at the difference between using these two properties (see chart below):
Shadow effect DropShadow Effect
In such a contrast, it is clear that the difference between the two.
The Shadow property can cast shadows at any angle, and the DropShadow attribute actually defines the shadow with an offset. So, the text and shadow on the left side of the picture seem to be one, and the text on the right is like a shadow.
The code for this example is as follows:
<HTML>
<title> shadow</title>
; Style> //* start setting CSS styles *//
<!--
. shadow{ position:absolute;top:20;width:300
Filter:shadow (color= #cc66ff, direction=225);
//* defines the style of the Shadow class, absolute positioning, shadow properties, shadow color, projection direction *//
.dropshadow{position:absolute ; top:180;width:300
Filter:dropshadow (color= #cc66ff, offx=10,offy=10,positive=1);
-->
</style>
<body>
<div class= "Shadow" & gt; //* area for Shadow class *//
<p style= "font-family:bailey;font-size:48pt;
Font-weight:bold;color: #FF9900;" & Gt
Hongen online</p> //* define font name, size, weight, foreground color *//
< /div>
<div class= "DropShadow" //* area for DropShadow class *//
<p style= font-family:bailey;font-size:48pt;
Font-weight:bold;color: #FF9900; ">
Hongen online</p> //* defines the same font style as the Shadow class *//
</body>
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
