陰影的寫法：1、文字陰影「text-shadow: h-shadow v-shadow blur color;」；2、邊框陰影「box-shadow: h-shadow v-shadow blur spread color inset; 」。
本教學操作環境：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>文本阴影！</h1>
</body>
</html>效果圖：
#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影片教學 ）
以上是css陰影怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
