CSS3-陰影引數基礎

box-shadow

語法：text-shadow: x-shadow y-shadow distance color;

 

值	描述
x-shadow	必需。水平陰影的位置。允許負值。
y-shadow	必需。垂直陰影的位置。允許負值。
distance	可選。模糊的距離。 測試
color	可選。陰影的顏色

text-shadow

語法：box-shadow: x-shadow y-shadow distance size color inset/outset;

 

值	描述
x-shadow	必需。陰影水平偏移量，可正可負，正值表示陰影在右邊，負值表示陰影在左邊。
y-shadow	必需。陰影垂直偏移量，可正可負，正值表示陰影在上邊，負值表示陰影在下邊。
distance	可選。陰影模糊距離。只能為正值，值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。
size	可選。陰影擴充套件半徑。可正可負，正值表示整個陰影都延展擴大，負值表示縮小。
color	可選。陰影的顏色。
inset	可選。將外部陰影 (outset) 改為內部陰影。

box-reflect

向框新增一個或多個倒影。

（1）direction：定義倒影的方向，取值包括：

above：倒影在物件的上邊。
below：倒影在物件的下邊。
left：倒影在物件的左邊。
right：倒影在物件的右邊。
（2）offset：定義倒影與物件之間的間隔，可正可負，預設為0。取值包括：

長度值
百分比（根據物件的尺寸進行確定）
（3）mask-box-image：定義遮罩影像，該影像將覆蓋投影區域，預設為無遮罩。

<url>：使用絕對或相對地址指定遮罩影像。
<linear-gradient>：使用線性漸變建立遮罩影像。
<radial-gradient>：使用徑向(放射性)漸變建立遮罩影像。
<repeating-linear-gradient>：使用重複的線性漸變建立背遮罩像。
<repeating-radial-gradient>：使用重複的徑向(放射性)漸變建立遮罩影像。