How to set image shadow in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set image shadow in css

青灯夜游

Nov 10, 2021 pm 04:41 PM

cssPicture shadow

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.

How to set image shadow in css

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.

Example:

<!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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="How to set image shadow in css" >
	</body>
</html>

How to set image shadow in css

2. Use filter:drop-shadow()# The ##filter attribute defines the visual effect (for example: blur and saturation) of the element (usually How to set image shadow in css ).

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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="How to set image shadow in css" >
	</body>
</html>

How to set image shadow in css (Learning video sharing:

css video tutorial

)

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn