css中可以寫陰影的屬性有：字體陰影(text-shadow)、盒陰影(box-shadow)、陰影(filter:drop-shaddow)。接下來帶大家一起來學習這些屬性的用法和要點。

盒子陰影(box-shadow)

javafx css內陰影innershadow_#網頁製作

語法：box-shadow: 水平偏移(px),垂直偏移(px),陰影模糊度(px),陰影大小(px),陰影顏色值,內陰影（inset）;可以設置多重陰影


垂直偏移(px):效果展示

javafx css內陰影innershadow_#box-shadow_02

 

水平偏移(px):效果展示

javafx css內陰影innershadow_#網頁製作_03

陰影模糊度(px):效果展示

javafx css內陰影innershadow_#前端_04

陰影大小(px):效果展示

javafx css內陰影innershadow_#前端_05

陰影顏色值(px):效果展示

javafx css內陰影innershadow_#網頁製作_06

 

內陰影(inset)，默認為外陰影，但是沒有（outset這個值）:效果展示

javafx css內陰影innershadow_#CSS_07

 

多重陰影（用","分開）:效果展示、

javafx css內陰影innershadow_#前端_08

 

文字陰影(box-shadow)

語法：text-shadow: 水平|垂直|模糊度|顏色值;

注意：文字陰影(box-shadow)--①可以設置多個陰影②不能設置內陰影③沒有陰影大小

字體陰影:效果展示

javafx css內陰影innershadow_#CSS_09

 

 

 

 

 

濾鏡中的陰影(filter:drop-shadow)

語法：filter:drop-shadow:(x偏移, y偏移, 模糊大小, 色值);

注意：①filter:drop-shadow是真正意義上的投影②沒有內陰影③不能寫多個陰影④背景為透明時不會有陰影（box-shadow有）

怎麼區分filter:drop-shadow陰影和box-shadow？下面通過寫用邊框寫的三角形來區分這兩個屬性，直接看圖：

filter:drop-shadow：效果圖展示

javafx css內陰影innershadow_#box-shadow_10

 

 

javafx css內陰影innershadow_#陰影_11