倒影box-reflect(可圖片可文字)

• 2020 年 4 月 1 日
• 筆記

需要寫兼容寫法：

-webkit-box-reflect：below 3px -webkit-(repeating)linear/redial-gradient(…)；

1.先寫direction定義方向：

above：倒映在其對象的上邊

below：倒映在其對象的下邊

left：左邊

right：右邊

2.offset定義對象與倒影的距離，默認為0，取值包括px和百分比，百分比是根據對象的大小進行確定。px和百分比都可為負值。

<offset>

• <length>：

  用長度值來定義倒影與對象之間的間隔。可以為負值

• <percentage>：

  用百分比來定義倒影與對象之間的間隔。可以為負值

3.mask-box-images定義

<mask-box-image>

• none：

  無遮罩圖像

• <url>：

  使用絕對或相對地址指定遮罩圖像。

• <linear-gradient>：

  使用線性漸變創建遮罩圖像。

• <radial-gradient>：

  使用徑向(放射性)漸變創建遮罩圖像。

• <repeating-linear-gradient>：

  使用重複的線性漸變創建背遮罩像。

• <repeating-radial-gradient>：

  使用重複的徑向(放射性)漸變創建遮罩圖像。