怎么用css制作阴影效果？制作阴影效果代码！

最近有很多人在私信小编怎么设置图片和字体的阴影效果，那么今天小编来和大家说说怎么用css制作阴影效果，而且在文中还为大家提供了制作阴影效果的代码！

1.首先我们在新建的 html 文件中，添加两个div的盒子，代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>css制作阴影效果</title>
	</head>
	<body>
		<div >
	       </div>
		<div >
		</div>
	</body>
</html>

2.当我们完成创建和添加的时候，我们在第一个盒子中加入 img 标签之后，我们可以挑选自己喜欢的一张图片加入在项目中的 img 文件夹当中，在来到代码块的中添加图片路径 src="(img文件夹中的图片)",在第二个div中加入

标签，代码及效果截图如下：


<html>
	<head>
		<meta charset="utf-8">
		<title>css制作阴影效果</title>
	</head>
	<body>
		<div  >
			<img src="./img/shadow.png" />
		</div>
		<div >
				<p>css制作阴影效果</p>
		</div>
	</body>
</html>

文本效果图

3.那么接下来我们开始来为实习阴影效果做下一步骤，在第一个和第二个的div中添加class和id的类属性，并且分别命名为shadow-img和shadow-txt，在继续添加link标签用来连接css做准备。代码如下：

html>
	<head>
		<meta charset="utf-8">
		<title>css制作阴影效果</title>
		<link href="css/css制作阴影效果.css" rel="stylesheet" />
	</head>
	<body>
		<div class="shadow-img" >
			<img src="./img/shadow.png" />
		</div>
		<div id="shadow-txt">
				<p>css制作阴影效果</p>
		</div>
	</body>
</html>

4.完成之后，我们开始编写 css 效果代码，根据图片的宽高我们设置第一个 div 的宽高这样才可以显示出来阴影效果，并且在第二个 div 中设置文字大小使得更加明显。代码如下：

.shadow-img{

/*需要先定义图片元素的宽高*/

width: 330px;

height: 326px;

/* 在 box-shadow 中的值得意思分别代表；阴影靠左距离、阴影靠上距离、阴影模糊度阴影颜色*/

box-shadow: 10px 10px 50px dimgrey;

}

#shadow-txt{

margin-top: 50px;

font-size: 50px;

/* 在 text-shadow 中的值得意思分别代表；阴影字体靠左距离、阴影字体靠上距离、阴影字体模糊度阴影字体颜色*/

text-shadow: 10px 5px 15px slategrey;

}

5.在css代码中我们用到了 box-shadow和txt-shadow，这两个属性都是用来设置阴影的，当中的值在文本中都有注释，不理解的小伙伴们可以再HTML教程中进行一个整体的复习和了解噢！那么我们来看看效果图吧！

是不是比没有设置阴影的时候比较真实了呢？好了今天的分享就到这个了，希望小编的分享对大家的学习和问题有所帮助！