溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css怎么做陰影效果

發(fā)布時(shí)間：2020-06-23 21:02:56 來(lái)源：億速云 閱讀：160 作者：Leah 欄目：web開(kāi)發(fā)

css怎么做陰影效果？這篇文章運(yùn)用了實(shí)例代碼展示，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

一：添加文字陰影效果（text-shadow屬性）

1. text-shadow是什么?
   text-shadow可以支持給文字加上陰影,這樣我們?cè)谠O(shè)計(jì)時(shí)可以利用css3屬性增加文字的質(zhì)感而不用使用任何圖片.目前支持的瀏覽器有Firefox 3.1+,Safari 3+,Opera 9.5+等現(xiàn)代瀏覽器(數(shù)據(jù)可能有偏差).當(dāng)然IE家族是無(wú)法支持的.

2. text-shadow的語(yǔ)法:

text-shadow:color length length length;

color : 顏色 ;
length : 分別按順序指“X軸方向長(zhǎng)度 Y軸方向長(zhǎng)度 陰影模糊半徑”，表示由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，可以為負(fù)值(或0值)，指定陰影的水平延伸距離。

正值在X軸表示向右,負(fù)值表示向左.同樣的道理Y軸負(fù)值是表示向上.其中任意一個(gè)值可以為零也可為空(將做默認(rèn)處理)

舉個(gè)例子：

text-shadow:0.1em 0.1em 0.3em #333333;

text-shadow屬性的第一個(gè)值表示水平位移，第二個(gè)值表示垂直位移，正值為偏右或偏下，負(fù)值為偏左或偏上，第三個(gè)值表示模糊半徑（該值可選），第四個(gè)值表示陰影的顏色（該值可選），這個(gè)顏色值可以放在陰影效果的長(zhǎng)度值值之前或之后。如果沒(méi)有指定顏色，那么將使用color屬性值來(lái)替代。

text-shadow屬性可以接受一個(gè)以逗號(hào)分割的陰影效果列表，并應(yīng)用到該元素的文本上。陰影效果按照給定的順序應(yīng)用，因此有可能出現(xiàn)互相覆蓋，但是不會(huì)覆蓋文本本身。陰影效果不會(huì)改變邊框的尺寸，但可能延伸到它的邊界值外。

3.代碼實(shí)例

主要利用就是text-shadow的陰影列表，加上使用合理的顏色搭配，就可以達(dá)到我們期望的效果了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字陰影效果</title>
		<style type="text/css">
		.demo{
			width: 600px;
			overflow: hidden;
			margin: 10px auto;
		}
		p {
			width: 300px;
			font-size: 3em;
			margin: 10px;
			padding: 20px;
			text-align: center;
		}
		
		.p1 {
			text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
			color: red;
		}
		
		.p2 {
			background: black;
			text-shadow: 0 -5px 4px #FF3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
			color: red;
		}
		
		.p3 {
			text-shadow: -1px -1px white, 1px 1px #333;
			color: #D1D1D1;
			font-weight: bold;
			background: #CCC;
		}
		
		.p4 {
			text-shadow: 1px 1px white, -1px -1px #333;
			color: #D1D1D1;
			font-weight: bold;
			background: #CCC;
		}
		
		.p5 {
			text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
			color: #ffffff;
			background: #CCC;
		}
		
		.p6 {
			text-shadow: 0 0 0.2em #F87, 0 0 0.2em #f87;
			color: #d1d1d1;
			background: #CCC;
		}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="p1">多色陰影效果</p>
			<p class="p2">火焰效果</p>
			<p class="p3">立體凸起效果</p>
			<p class="p4">立體凹下效果</p>
			<p class="p5">描邊效果</p>
			<p class="p6">外發(fā)光效果</p>
		</div>

	</body>

</html>

效果圖：

css怎么做陰影效果

二、添加盒子（邊框）陰影效果（box-shadow屬性）

1.box-shadow的語(yǔ)法

E {box-shadow: inset   x-offset   y-offset   blur-radius   spread-radius   color};
E {box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色};

取值：
1. 陰影類型：此參數(shù)可選，默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內(nèi)陰影；
2.X-offset:是指陰影水平偏移量,其值可正可負(fù)，正值，則陰影在對(duì)象的右邊，負(fù)值，陰影在對(duì)象的左邊；
3. Y-offset:是指陰影的垂直偏移量，其值也可以是正負(fù)值，正值，陰影在對(duì)象的底部，負(fù)值時(shí)，陰影在對(duì)象的頂部；
4.陰影模糊半徑：此參數(shù)是可選，只能為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊；
5. 陰影擴(kuò)展半徑：此參數(shù)可選，其值可為正負(fù)值，正值，則整個(gè)陰影都延展擴(kuò)大，反之，則縮??；
6. 陰影顏色：此參數(shù)可選，不設(shè)定任何顏色時(shí)，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無(wú)色，也就是透明，建議不要省略此參數(shù)。

2.考慮兼容性

//Firefox4.0-
-moz-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色;

3.代碼實(shí)例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>box-shadow的用法</title>
		<style type="text/css">
			.demo {
				width: 800px;
				overflow: hidden;
				margin: 50px auto;
			}
			
			.demo * {
				width: 150px;
				height: 150px;
				margin: 40px 20px;
				background-color: grey;
				display: inline-block;
			}
			/*右下陰影*/
			
			.box-shadow-1 {
				-webkit-box-shadow: 3px 3px 3px;
				-moz-box-shadow: 3px 3px 3px;
				box-shadow: 3px 3px 3px;
			}
			/*四邊同色陰影*/
			
			.box-shadow-2 {
				-webkit-box-shadow: 0 0 10px #0CC;
				-moz-box-shadow: 0 0 10px #0CC;
				box-shadow: 0 0 10px #0CC;
			}
			/*四邊同色陰影擴(kuò)展*/
			
			.box-shadow-3 {
				-webkit-box-shadow: 0 0 10px 15px #0CC;
				-moz-box-shadow: 0 0 10px 15px #0CC;
				box-shadow: 0 0 10px 15px #0CC;
			}
			/*四邊同色內(nèi)陰影*/
			
			.box-shadow-4 {
				-webkit-box-shadow: inset 0 0 10px #0CC;
				-moz-box-shadow: inset 0 0 10px #0CC;
				box-shadow: inset 0 0 10px #0CC;
			}
			/*四邊異色外陰影*/
			
			.box-shadow-5 {
				box-shadow: -10px 0 10px red, /*左邊陰影*/
				10px 0 10px yellow, /*右邊陰影*/
				-10px 10px blue, /*頂部陰影*/
				10px 10px green;
				/*底邊陰影*/
			}
			/*疊加異色陰影*/
			
			.box-shadow-6 {
				box-shadow: 0 0 10px 5px black, 0 10px 20px red;
			}
			/*兼容ie*/
			
			.box-shadow {
				filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);
				/*for ie6,7,8*/
				background-color: #ccc;
				-moz-box-shadow: 2px 2px 5px #969696;
				/*firefox*/
				-webkit-box-shadow: 2px 2px 5px #969696;
				/*webkit*/
				box-shadow: 2px 2px 5px #969696;
				/*opera或ie9*/
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="box-shadow-1">右下陰影</div>
			<div class="box-shadow-2">四邊同色陰影</div>
			<div class="box-shadow-3">四邊同色陰影擴(kuò)展</div>
			<div class="box-shadow-4">四邊同色內(nèi)陰影</div>
			<div class="box-shadow-5">四邊異色外陰影</div>
			<div class="box-shadow-6">疊加異色陰影</div>
			<div class="box-shadow">兼容ie</div>
		</div>
	</body>

</html>

效果圖：

css怎么做陰影效果

到此為止, 關(guān)于css實(shí)現(xiàn)陰影效果的方法有了一個(gè)基礎(chǔ)的認(rèn)識(shí), 但是對(duì)于具體的使用方法還是需要多加鞏固和練習(xí)，如果想了解更多相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手