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

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

反饋

最近有很多人在私信小編怎么設(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)簽之后，我們可以挑選自己喜歡的一張圖片加入在項目中的 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.那么接下來我們開始來為實習(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è)置陰影的時候比較真實了呢？好了今天的分享就到這個了，希望小編的分享對大家的學(xué)習(xí)和問題有所幫助！

HTML CSS 編程基礎(chǔ)

0 人點贊

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

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