css陰影怎麼寫-css教學-PHP中文網

首頁

web前端

css教學

css陰影怎麼寫

青灯夜游

Jul 15, 2021 pm 05:15 PM

css陰影

陰影的寫法：1、文字陰影「text-shadow: h-shadow v-shadow blur color;」；2、邊框陰影「box-shadow: h-shadow v-shadow blur spread color inset; 」。

css陰影怎麼寫

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

1、css文字陰影的寫法

在css中，可使用text-shadow屬性實現帶陰影的文本，text-shadow 屬性應用於陰影文本。

語法

text-shadow: h-shadow v-shadow blur color;

值	#描述
h-shadow	必要。水平陰影的位置。允許負值。
v-shadow	必要。垂直陰影的位置。允許負值。
blur	可選。模糊的距離。
color	#可選。陰影的顏色。

注意： text-shadow屬性連接一個或更多的陰影文字。屬性是陰影，指定的每2或3個長度值和一個可選的顏色值用逗號分隔開來。已失時效的長度為0。

範例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1 id="文本阴影">文本阴影！</h1>
    </body> 
</html>

效果圖：

css陰影怎麼寫

#2、css邊框陰影的寫法

在css中，可使用box-shadow屬性實作邊框陰影效果，box-shadow屬性可以設定一個或多個下拉陰影的方塊。

語法

box-shadow: h-shadow v-shadow blur spread color inset;

值	#說明
h-shadow	必要的。水平陰影的位置。允許負值
v-shadow	#必要的。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色。
inset	可選。從外層的陰影（開始時）改變陰影內側陰影

注意：boxShadow 屬性把一個或多個下拉陰影加到框上。此屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。

範例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

效果圖：

css陰影怎麼寫