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