CSS 속성 상자 반영 호환성?

Question

mozilla 및 다른 브라우저의 경우 -webkit-box-reflect과 비슷한 속성이 있습니까? 나는 다른 브라우저가 이것을 지원하는 구글을 찾을 수 없었다. 누군가가 나에게 말하거나 링크를 줄 수 있다면 정말 좋을 것입니다.

Answer 1

웹 키트 (최신 크롬 또는 사파리)뿐만 아니라 최신 파이어 폭스와 함께이 가능합니다.

#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; 
} 

: - http://codepen.io/jonathan/pen/pgioE

HTML : : :

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

CSS (웹킷) (게코 파이어 폭스)

#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는 반사 (https://developer.mozilla.org/en-US/docs/CSS/element)를 수행하는 데 -moz-element을 사용하지만 Webkit은 반사를 위해 독점 공급 업체 프리픽스를 사용합니다.

도움이 되었기를 바랍니다.

Answer 2

-webkit-box-reflect 속성은 Chrome과 Safari와 같은 웹킷 브라우저에서만 지원됩니다. 독점적 인 웹킷 속성이므로 다른 브라우저에는 해당하지 않습니다.

대안은 희미한 불투명도로 미러 요소를 만드는 데 자바 스크립트를 사용하는 것입니다.