Drop Shadow Creates a shadow of an object at a specified X (horizontal) and Y (vertical) offset and color.
The following parameters can be used in this filter:
| Parameters | Description
|
|---|---|
| Color | Color, in #RRGGBB format, shaded. |
| offX | The number of pixels the projection is offset from the visual object along the x-axis. Positive integers move the projection to the right, negative integers move the projection to the left. |
| offY | The number of pixels the shadow is offset from the visual object along the y-axis. Positive integers move the shadow downward, negative integers move the shadow upward. |
| Positive | If true, all opaque pixels of the object have a shadow. If false, all transparent pixels have shadows. Defaults to true. |
You can try running the following code to set the drop shadow effect:
Live Demo
<html>
<head></head>
<body>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "Filter: Chroma(Color = #000000)
DropShadow(Color = #FF0000,
OffX = 2,
OffY = 2, Positive = 1)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div>
</body>
</html>The above is the detailed content of Set shadow effects using CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
