最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如何用css制作阴影效果？制作阴影效果代码！
时间：2026-08-19 11:22:50 编辑：袖梨 来源：一聚教程网
最近有很多人在私信小编怎么设置图片和字体的阴影效果，那么今天小编来和大家说说怎么用css制作阴影效果，而且在文中还为大家提供了制作阴影效果的代码！
1.首先我们在新建的 html 文件中，添加两个div的盒子，代码如下：
<html>
<head>
<meta charset="utf-8">
<title>css制作阴影效果</title>
</head>
<body>
<div >
</div>
<div >
</div>
</body>
</html>
2.当我们完成创建和添加的时候，我们在第一个盒子中加入 img 标签之后，我们可以挑选自己喜欢的一张图片加入在项目中的 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教程中进行一个整体的复习和了解噢！那么我们来看看效果图吧！
是不是比没有设置阴影的时候比较真实了呢？好了今天的分享就到这个了，希望小编的分享对大家的学习和问题有所帮助！