最近有很多人在私信小編怎么設(shè)置圖片和字體的陰影效果，那么今天小編來和大家說說怎么用css制作陰影效果，而且在文中還為大家提供了制作陰影效果的代碼！
1.首先我們在新建的 html 文件中，添加兩個(gè)?div?的盒子，代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>css制作陰影效果</title>
</head>
<body>
<div >
</div>
<div >
</div>
</body>
</html>
2.當(dāng)我們完成創(chuàng)建和添加的時(shí)候，我們在第一個(gè)盒子中加入 ?img? 標(biāo)簽之后，我們可以挑選自己喜歡的一張圖片加入在項(xiàng)目中的 img 文件夾當(dāng)中，在來到代碼塊的?src="(img文件夾中的圖片)"?,在第二個(gè)?div?中加入?
?標(biāo)簽，代碼及效果截圖如下：
<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.那么接下來我們開始來為實(shí)習(xí)陰影效果做下一步驟，在第一個(gè)和第二個(gè)的?div?中添加?class?和?id?的類屬性，并且分別命名為?shadow-img?和?shadow-txt?，在繼續(xù)添加link標(biāo)簽用來連接css做準(zhǔn)備。代碼如下：
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 效果代碼，根據(jù)圖片的寬高我們設(shè)置第一個(gè) div 的寬高這樣才可以顯示出來陰影效果，并且在第二個(gè) div 中設(shè)置文字大小使得更加明顯。代碼如下：
.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?，這兩個(gè)屬性都是用來設(shè)置陰影的，當(dāng)中的值在文本中都有注釋，不理解的小伙伴們可以再HTML教程中進(jìn)行一個(gè)整體的復(fù)習(xí)和了解噢！那么我們來看看效果圖吧！
是不是比沒有設(shè)置陰影的時(shí)候比較真實(shí)了呢？好了今天的分享就到這個(gè)了，希望小編的分享對大家的學(xué)習(xí)和問題有所幫助！
