CSS box-reflect 屬性

定義和用法

box-reflect 屬性用于創建元素的反射效果。

box-reflect 屬性的值可以是：

  • below（下方）
  • above（上方）
  • left（左側）
  • right（右側）

注意：box-reflect 屬性是非標準屬性，必須使用 -webkit- 前綴。

實例

例子 1

在圖片下方添加反射效果：

img {
  -webkit-box-reflect: below;
}

親自試一試

例子 2

box-reflect 屬性可以應用于任何可見的 HTML 元素。下例在 <p> 標簽下方創建反射效果：

p {
  -webkit-box-reflect: below;
}

親自試一試

例子 3

box-reflect 屬性可以使用雙值語法。下例在圖片下方創建反射效果，并設置 70px 的距離：

img {
  -webkit-box-reflect: below 70px;
}

親自試一試

例子 4

box-reflect 屬性還可以使用三值語法。下例在圖片下方創建反射效果，設置 10px 的距離，并逐漸淡出：

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

親自試一試

CSS 語法

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

屬性值

值 描述
none 默認值。不顯示反射效果。
below 在元素下方創建反射效果。
above 在元素上方創建反射效果。
left 在元素左側創建反射效果。
right 在元素右側創建反射效果。
position offset

雙值語法：

  • position 設置反射的位置（below、above、left 或 right）。
  • offset 設置反射的距離。距離可以使用 px、pt、cm 等單位。默認值為 0。
position offset gradient

三值語法：

  • position 設置反射的位置（below、above、left 或 right）。
  • offset 設置反射的距離。距離可以使用 px、pt、cm 等單位。默認值為 0。
  • gradient 設置反射的過渡效果，例如淡出效果。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： none
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.webkitBoxReflect="below"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

帶有 -webkit- 前綴的數字表示首個支持該前綴的版本。

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- 不支持 4.0 -webkit- 15.0 -webkit-