Совместимость с коробкой с CSS-совместимостью?

Есть ли аналогичное свойство для -webkit-box-reflect для mozilla и других браузеров? Я не мог найти в google, что другие браузеры поддерживают это. Поэтому, если кто-то может сказать мне или дать мне ссылку, это было бы очень приятно.

Ответ 1

Это возможно не только с webkit (последний хром или сафари), но и с последним firefox.

Вот пример: 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 использует -moz-element для выполнения отражений (https://developer.mozilla.org/en-US/docs/CSS/element), тогда как webkit использует префикс фирменного поставщика для отражений.

Надеюсь, это поможет!

Ответ 2

Свойство -webkit-box-reflect поддерживается только браузерами webkit, а именно Chrome и Safari. Поскольку это собственное свойство webkit, для других браузеров нет эквивалента.

Альтернативой будет использование javascript для создания зеркального элемента с увядшей непрозрачностью.