box-reflect
Определение box-reflect
CSS свойство box-reflect
используется для создания отражения элемента.
Значение CSS свойство box-reflect
может быть: below
, above
, left
, или right
.
Примечание: CSS свойство box-reflect
является нестандартным и должно быть записано с помощью префикса -webkit-
.
Значение по умолчанию: | none |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.webkitBoxReflect="below" Попробуй |
Поддержка box-reflect
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-
, указывают первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Не поддерживается | 4.0 -webkit- | 15.0 -webkit- |
Синтаксис box-reflect
box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;
Значения box-reflect
Значение свойства | Описание | Демонстрация |
---|---|---|
none | Значение по умолчанию. Отражение не отображается. | Демо ❯ |
below | Создает отражение под элементом. | Демо ❯ |
above | Создает отражение над элементом. | Демо ❯ |
left | Создает отражение слева от элемента. | Демо ❯ |
right | Создает отражение справа от элемента. | Демо ❯ |
position offset | Синтаксис с двумя значениями: - position устанавливает отражение ниже, над, слева или справа от элемента. - offset устанавливает расстояние до отражения. Расстояние Определяется в пикселях, pt, см и т.д. Значение по умолчанию равно 0. Читайте о единицы измерения длины |
Демо ❯ |
position offset gradient | Синтаксис с тремя значениями: - position устанавливает отражение ниже, над, слева или справа от элемента. - offset устанавливает расстояние до отражения. Расстояние Определяется в пикселях, pt, см и т.д. Значение по умолчанию равно 0. Читайте о единицы измерения длины - gradient устанавливает переход для отражения, т.е. эффект затухания. |
Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры box-reflect
CSS свойство box-reflect
может быть установлено для любого видимого HTML-элемента. Здесь отражение выполняется под p-тегом:
p {
-webkit-box-reflect: below;
}
Попробуйте сами »
CSS свойство box-reflect
значение может быть задано с помощью синтаксиса с двумя значениями. Здесь отражение находится ниже img-элемента, но на расстоянии 70 пикселей:
img {
-webkit-box-reflect: below 70px;
}
Попробуйте сами »
CSS свойство box-reflect
значение также может быть задано с помощью синтаксиса с тремя значениями. Здесь отражение находится под элементом img на расстоянии 10 пикселей и постепенно исчезает:
img {
-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
Попробуйте сами »
Страницы по теме box-reflect
CSS Учебник: CSS Отражение изображения