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>:使用重復的徑向(放射性)漸變創建遮罩圖像。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM