Home > Article > Web Front-end > How to set image shadow in css
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;
<!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:
css video tutorialThe 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!