本篇内容介绍了“如何用css制作阴影效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

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

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

标签，代码及效果如下：

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

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

html><head><metacharset="utf-8"><title>css制作阴影效果</title><linkhref="css/css制作阴影效果.css"rel="stylesheet"/></head><body><divclass="shadow-img"><imgsrc="./img/shadow.png"/></div><divid="shadow-txt"><p>css制作阴影效果</p></div></body></html>

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

.shadow-img{/*需要先定义图片元素的宽高*/width:330px;height:326px;/*在box-shadow中的值得意思分别代表；阴影靠左距离、阴影靠上距离、阴影模糊度阴影颜色*/box-shadow:10px10px50pxdimgrey;}#shadow-txt{margin-top:50px;font-size:50px;/*在text-shadow中的值得意思分别代表；阴影字体靠左距离、阴影字体靠上距离、阴影字体模糊度阴影字体颜色*/text-shadow:10px5px15pxslategrey;}

5.在css代码中我们用到了 box-shadow和txt-shadow，这两个属性都是用来设置阴影的，当中的值在文本中都有注释。

“如何用css制作阴影效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！