box-reflect

語法:

box-reflect:none | <direction> <offset>? <mask-box-image>?

<direction> = above | below | left | right

<offset> = <length> | <percentage>

<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默認值none

取值:

none:
無倒影

<direction> Demo: 簡單圖片倒影 See with Webkit

above:
指定倒影在對象的上邊
below:
指定倒影在對象的下邊
left:
指定倒影在對象的左邊
right:
指定倒影在對象的右邊

<offset> Demo: 圖片與倒影間隔 See with Webkit

<length>
用長度值來定義倒影與對象之間的間隔。可以爲負值
<percentage>
用百分比來定義倒影與對象之間的間隔。可以爲負值

<mask-box-image> Demo: 更真實的圖片倒影 文字倒影與漸變 See with Webkit

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

說明:

設置或檢索對象倒影。
  • 對應的腳本特性爲boxReflect

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 墨綠 = 部分支持
  • 橙色 = 实验性质
支持版本\類型 IE Firefox Safari Chrome Opera
版本 6.0-10.0 4.0-9.0 5.1 13.0 11.50-11.60

示例: