css怎么给图片添加阴影效果？图片添加阴影的两种方法（代码实例）-css教程-PHP中文网

首页

web前端

css教程

css怎么给图片添加阴影效果？图片添加阴影的两种方法（代码实例）

青灯夜游

Oct 18, 2018 pm 01:58 PM

css图片阴影滤镜阴影

css可以实现很多的图片效果，图片阴影效果就是其中之一，那么css如何给图片添加阴影效果？本篇文章就给大家介绍如何使用css给图片添加阴影（附代码），让大家了解css给图片加阴影的两种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。

首先我们来看看css给图片添加阴影效果的第一种方法：设置box-shadow属性，通过一个简单的代码示例来看看box-shadow属性的实现方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 图片阴影--box-shadow属性</title>
		<style>
			.demo{
				width: 400px;
				height: 300px;
				margin: 50px auto;
			}
			.demo 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>
		<div class="demo">
			<img src="1.jpg" />
		</div>
	</body>
</html>

效果图：

box-shadow属性设置图片阴影是不是很简单，下面我们来看看box-shadow属性的是如何设置的：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需设置的值，定义水平阴影的位置。允许负值。

v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。

blur：可选设置的值，定义模糊距离。

spread：可选设置的值，定义阴影的尺寸。

color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。

inset：可选设置的值，设置后可将外部阴影 (outset) 改为内部阴影。

接下来我们来看看css给图片添加阴影效果的第二种方法：使用css3的滤镜属性-----filter 属性设置图片阴影。

可以设置filter:drop-shadow(）;来给图片添加阴影，我们来通过一个简单的代码示例看看实现方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 图片阴影--box-shadow属性</title>
		<style>
			.demo{
				width: 400px;
				height: 300px;
				margin: 50px auto;
			}
			.demo 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>
		<div class="demo">
			<img src="1.jpg" />
		</div>
	</body>
</html>

效果图：

说明：

filter:drop-shadow(h-shadow v-shadow blur spread color);

h-shadow：设置阴影的水平方向偏移量；允许负值，负值会使阴影出现在元素左边。

v-shadow：设置阴影的垂直方向偏移量；允许负值，负值会使阴影出现在元素上方。

blur：设置阴影的模糊度，值越大，越模糊，阴影也就会变得更大更淡；不允许负值，若未设定，默认是0 (阴影的边界很锐利)。

spread：设置阴影的尺寸，正值会使阴影扩张和变大，负值会是阴影缩小；若未设定，默认是0 (阴影会与元素一样大小)。
注：在Webkit以及其他一些浏览器中不支持spread，如果加了也不会渲染。

color：设置阴影颜色；若未设定，颜色值基于浏览器，建议设置颜色。

总结：以上就是css给图片添加阴影的两种方法的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程，Html5视频教程，bootstrap视频教程！

以上是css怎么给图片添加阴影效果？图片添加阴影的两种方法（代码实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

详解win10电脑所有字体阴影怎么办Jul 23, 2023 pm 11:13 PM

在使用电脑的过程中，由于操作不当等情况可以会产生一些问题出来。最近就有网友说自己的win10电脑所有字体阴影怎么办，比较影响查看，桌面的图标都有了阴影。下面小编教下大家清除电脑桌面所有字体阴影的方法。具体的步骤如下：1、首先打开电脑，输入win+r组合键，打开运行窗口，输入gpedit.msc确定。2、找到启用ActiveDesktop，双击将它打开，并将其禁用。3、接下来我们需要再打开下面的禁用ActiveDesktop，再将其启用。4、再打开控制面板的系统，打开其高级系统设置属性，再进入到性

C++图像处理实践指南：实现图像特效和滤镜Nov 27, 2023 am 11:40 AM

在计算机科学和图像处理领域，C++一直是最常用的编程语言之一。图像处理是计算机视觉的重要子领域之一，包括图像分析、处理和识别等方面。本文将介绍C++图像处理中的一些基本概念和技巧，并提供一些实现图像特效和滤镜的示例代码，帮助读者更好地理解和实践C++图像处理。一、C++图像处理基础1.1常用的图像文件格式在图像处理中，我们通常需要用到各种图像文件格式，包括