CSS3中box-reflect特性以及火狐瀏覽器替代方案
阿新 • • 發佈：2018-12-10
CSS3中的box-reflect特性可以實現倒影的效果，但是這個特性僅僅支援webkit核心的瀏覽器，即使到現在，其他瀏覽器依舊不支援這一特性，但是在火狐瀏覽器中有替代的方案可以實現倒影的效果。 下面首先介紹一下這一特性：
box-reflect：none | <direction> <offset>? <mask-box-image>?- 1
- direction 定義方向，取值包括 above 、 below 、 left 、 right，分別表示倒影在物件的上方、下方、左方、右方。
- offset定義反射偏移的距離，取值包括數值或百分比。也可以理解與物件間的距離。
- mask-box-image定義遮罩影象，該影象將覆蓋投影區域。 none：無遮罩影象 url：使用絕對或相對地址指定遮罩影象。 linear-gradient：使用線性漸變建立遮罩影象。 radial-gradient：使用徑向(放射性)漸變建立遮罩影象。 repeating-linear-gradient：使用重複的線性漸變建立背遮罩像。 repeating-radial-gradient：使用重複的徑向(放射性)漸變建立遮罩影象。
下面展示一個簡單的圖片倒影的例子：
<!DOCTYPE html>
<htmllang="en">
< - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
box-reflect需要加上-webkit-字首才可以在谷歌瀏覽器中渲染。
效果如下：
但是在火狐中有一種替代方案：#id{ background: -moz-element(#id) no-repeat;} 下面簡單展示一下，在樣式表中加入以下程式碼：
#moz-content:after {
content: "";
display: block; //使after成為塊級元素，便於設定寬度高度以及呈現於圖片下方
background: -moz-element(#moz-content) no-repeat;//背景為content元素的內容
width: auto;
height: 100%;//使高度和圖片保持一致
-moz-transform: scaleY(-1);//使倒影圖片反向
opacity:0.7;//設定倒影透明度
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
現在在火狐瀏覽器下的效果是：
在這裡要提醒一下，注意設定的#moz-content:after的height高度時要保持height與圖片的height保持一致，設定百分比來保持高度一致就是一個比較好的方案。