CSS box-reflect 屬性
定義和用法
box-reflect 屬性用於建立元素的反射。
box-reflect 屬性的值可以是： below、 above、 left 或 right。
注意： box-reflect 屬性是非標準的，必須使用 -webkit- 字首書寫。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
帶有 -webkit- 的數字表示該功能首次支援的瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | 不支援 | 4.0 -webkit- | 15.0 -webkit- |
CSS 語法
box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;
屬性值
| 屬性值 | 描述 | 演示 |
|---|---|---|
| none | 預設值。不顯示任何反射。 | 演示 ❯ |
| below | 在元素下方建立反射。 | 演示 ❯ |
| above | 在元素上方建立反射。 | 演示 ❯ |
| left | 在元素左側建立反射。 | 演示 ❯ |
| right | 在元素右側建立反射。 | 演示 ❯ |
| position offset | 雙值語法 - position 設定反射在元素的下方、上方、左側或右側。 - offset 設定反射的距離。距離以 px、pt、cm 等為單位。預設值為 0。 閱讀有關長度單位的資訊 |
演示 ❯ |
| position offset gradient | 三值語法 - position 設定反射在元素的下方、上方、左側或右側。 - offset 設定反射的距離。距離以 px、pt、cm 等為單位。預設值為 0。 閱讀有關長度單位的資訊 - gradient 設定反射的過渡，即漸變效果。 |
演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
box-reflect 屬性值可以使用雙值語法設定。這裡，反射在 img 元素下方，但距離為 70px
img {
-webkit-box-reflect: below 70px;
}
自己動手試一試 »
示例
box-reflect 屬性值也可以使用三值語法設定。這裡，反射在 img 元素下方，距離為 10px，並逐漸淡出
img {
-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
自己動手試一試 »
相關頁面
CSS 教程： CSS 影像反射
