如何用css制作阴影效果

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

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

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

标签，代码及效果如下：

                                                
                                 
            
                               
css制作阴影效果
            
    

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

html>                                                           
                                     
            
                              
css制作阴影效果
            
    

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制作阴影效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！