Home > Article > Web Front-end > How to set image shadow in css
How to set image shadow in css
- 青灯夜游Original
- 2021-11-10 16:41:3218747browse
Setting method: 1. Use the "box-shadow: horizontal shadow vertical shadow blur spread color inset;" statement; 2. Use the "filter:drop-shadow (horizontal shadow vertical shadow blur spread color)" statement.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
There are two ways to set the shadow of an image in css:
box-shadow attribute
filter:drop-shadow( )
Let me introduce to you
1. Use the box-shadow attribute
box-shadow attribute to add to the box One or more shadows.
Syntax: box-shadow: h-shadow v-shadow blur spread color inset;
- ##h-shadow Required. The position of the horizontal shadow. Negative values are allowed.
- v-shadow Required. The position of the vertical shadow. Negative values are allowed.
- blur Optional. Fuzzy distance.
- spread Optional. The size of the shadow.
- color Optional. The color of the shadow. See CSS color values.
- inset Optional. Change the outer shadow (outset) to an inner shadow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
/*考虑浏览器兼容性*/
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="How to set image shadow in css" >
</body>
</html>
2. Use filter:drop-shadow()# The ##filter attribute defines the visual effect (for example: blur and saturation) of the element (usually ).
drop-shadow() can set a shadow effect on the image. Shadows are composited underneath the image and can be blurred, offset versions of the matte that can be painted in a specific color.
Syntax:
filter:drop-shadow(h-shadow v-shadow blur spread color);Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="How to set image shadow in css" >
</body>
</html>
(Learning video sharing:
The above is the detailed content of How to set image shadow in css. For more information, please follow other related articles on the PHP Chinese website!