怎么用css制作陰影效果？制作陰影效果代碼！

猿友 2021-05-26 15:36:39 瀏覽數(shù) (4319)

反饋

最近有很多人在私信小編怎么設(shè)置圖片和字體的陰影效果，那么今天小編來(lái)和大家說(shuō)說(shuō)怎么用css制作陰影效果，而且在文中還為大家提供了制作陰影效果的代碼！

1.首先我們?cè)谛陆ǖ?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í)候，我們?cè)诘谝粋€(gè)盒子中加入 ?img? 標(biāo)簽之后，我們可以挑選自己喜歡的一張圖片加入在項(xiàng)目中的 img 文件夾當(dāng)中，在來(lái)到代碼塊的??中添加圖片路徑 ?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.那么接下來(lái)我們開(kāi)始來(lái)為實(shí)習(xí)陰影效果做下一步驟，在第一個(gè)和第二個(gè)的?div?中添加?class?和?id?的類屬性，并且分別命名為?shadow-img?和?shadow-txt?，在繼續(xù)添加link標(biāo)簽用來(lái)連接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.完成之后，我們開(kāi)始編寫 css 效果代碼，根據(jù)圖片的寬高我們?cè)O(shè)置第一個(gè) div 的寬高這樣才可以顯示出來(lái)陰影效果，并且在第二個(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è)屬性都是用來(lái)設(shè)置陰影的，當(dāng)中的值在文本中都有注釋，不理解的小伙伴們可以再HTML教程中進(jìn)行一個(gè)整體的復(fù)習(xí)和了解噢！那么我們來(lái)看看效果圖吧！

是不是比沒(méi)有設(shè)置陰影的時(shí)候比較真實(shí)了呢？好了今天的分享就到這個(gè)了，希望小編的分享對(duì)大家的學(xué)習(xí)和問(wèn)題有所幫助！

HTML CSS 編程基礎(chǔ)

0 人點(diǎn)贊

怎么用css制作陰影效果？制作陰影效果代碼！

怎么用css制作陰影效果？制作陰影效果代碼！