-webkit-box-reflect

Свойство -webkit-box-reflect — описывает зеркальные отражения элемента.

Значения свойства задает направление отражения, расстояние между элементом и его отражением и изображение, применяемое к элементу в качестве маски. Если изображение не задано, отражение не имеет маски. Порядок значений строго определен.

Допустимые значения

  • <направление> — задает направление отражения, может иметь четыре значения:
    • above — элемент отражается относительно своей верхней стороны
    • below — элемент отражается относительно своей нижней стороны
    • left — элемент отражается относительно своей левой стороны
    • right — элемент отражается относительно своей правой стороны
  • <расстояние> — расстояние между элементом и его отражением в абсолютных или процентных значениях (если не задано, то 0px)
  • <расстояние> — расстояние между элементом и его отражением в абсолютных или процентных значениях (если не задано, то 0px)
  • <маска> — url путь к изображению или полупрозрачный градиент, который будет принят для отражения в качестве маски
Значение по умолчанию none
Применимо ко всем элементам
Наследование нет
Поддерживается браузерами
  • Safari 5.0 и выше
  • Chrome 4.0 и выше

Пример

CSS
h1 {
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

По теме