Свойство CSS `-webkit-box-reflect`
Нестандартное: Эта функция не является стандартной и не входит в план стандартизации. Не используйте её на сайтах, доступных в Интернете: она будет работать не у всех пользователей. Между реализациями также могут быть существенные различия, а поведение может измениться в будущем.
Нестандартное: Эта функция не является стандартной и не входит в план стандартизации. Не используйте её на сайтах, доступных в Интернете: она будет работать не у всех пользователей. Между реализациями также могут быть существенные различия, а поведение может измениться в будущем.
Свойство -webkit-box-reflect CSS позволяет отражать содержимое элемента в одном направлении.
Синтаксис
/* Direction values */ -webkit-box-reflect: above; -webkit-box-reflect: below; -webkit-box-reflect: left; -webkit-box-reflect: right; /* Offset value */ -webkit-box-reflect: below 10px; /* Mask value */ -webkit-box-reflect: below 0 linear-gradient(transparent, white); /* Global values */ -webkit-box-reflect: inherit; -webkit-box-reflect: initial; -webkit-box-reflect: revert; -webkit-box-reflect: revert-layer; -webkit-box-reflect: unset;
Значения
Это свойство задаётся списком следующих значений, разделённых пробелами:
-
above,below,right,left - Ключевые слова, указывающие направление отражения.
-
<length> - Указывает размер отражения.
-
<image> - Описывает маску, применяемую к отражению.
Формальное определение
| Начальное значение | none |
|---|---|
| Применяется к | всем элементам |
| Наследуется | нет |
| Вычисленное значение | как задано |
| Тип анимации | дискретный |
Формальный синтаксис
-webkit-box-reflect = [ above | below | right | left ]? <length>? <image>?
Спецификации
Не входит ни в один стандарт. Стандартный способ создания отражения в CSS — использовать функцию CSS element().
Совместимость с браузерами
| Настольные компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
-webkit-box-reflect |
4 |
79 |
Нет |
15 |
4 |
18 |
Нет |
14 |
3.2 |
1.0 |
2.2 |
3.2 |
См. также
- Документация Apple.
- Спецификация WebKit.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-box-reflect
