本篇内容介绍了“如何用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，这两个属性都是用来设置阴影的，当中的值在文本中都有注释。
“如何用css制作阴影效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
