Hộp thuộc tính CSS-phản ánh tính tương thích?

Question

Có thuộc tính tương tự như -webkit-box-reflect cho mozilla và các trình duyệt khác không? Tôi không thể tìm thấy trên google mà các trình duyệt khác có hỗ trợ cho việc này. Vì vậy, nếu ai đó có thể cho tôi biết hoặc cho tôi liên kết, điều đó sẽ thực sự tốt đẹp.

Answer 1

Điều này là có thể không chỉ webkit (chrome mới nhất hoặc safari) mà còn trong firefox mới nhất.

Dưới đây là ví dụ: http://codepen.io/jonathan/pen/pgioE

HTML:

<div id="someid"> 
    <img src="image url" /> 
<div/> 

CSS (webkit):

#someid { 
     /* need some space for the reflection */ 
     margin-bottom: 120px; 
     /* the gradient makes the reflection fade out */ 
     -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%); 
} 

CSS (Firefox - Gecko):

#someid { 
     position: relative; 
     /* need some space for the reflection */ 
     margin-bottom: 120px; 
} 

#someid:before { 
     content:""; /* needed or nothing will be shown */ 
     background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat; 
     -moz-transform: scaleY(-1); /* flip the image vertically */ 
     position:relative; 
     height:140px; 
     width: 360px; /* should be > image width + margin + shadow */ 
     top: 247px; 
     left:0px; 
} 

Firefox sử dụng -moz-element để thực hiện các phản xạ (https://developer.mozilla.org/en-US/docs/CSS/element), trong khi webkit sử dụng tiền tố của nhà cung cấp độc quyền để phản ánh.

Tôi hy vọng điều này sẽ hữu ích!

Answer 2

Thuộc tính -webkit-box-reflect chỉ được trình duyệt webkit hỗ trợ, cụ thể là Chrome và Safari. Vì nó là một thuộc tính webkit độc quyền, không có tương đương với các trình duyệt khác.

Cách khác là sử dụng javascript để tạo thành phần tử phản chiếu có độ mờ mờ nhạt.