Свойство -webkit-mask-box-image

Свойство -webkit-mask-box-image задает изображение, которое будет применено к границе элемента в качестве маски.

Маска применяется для скрытия некоторых частей границы.

В качестве маски может быть использовано любое изображение, причем прозрачные части маски делают элемент невидимым, непрозрачные — видимым, а полупрозрачные — полупрозрачными в зависимости от прозрачности маски.

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

url — путь к файлу-картинке для маски как в border-image-source
— вместо url можно использовать функцию градиента для элемента (в качестве маски имеет смысл задавать только полупрозрачные градиенты, поскольку маска влияет на прозрачность элемента, а не на его цвет)
— отступы от границ как в border-image-slice
stretch, round, repeat — повтор картинок как в border-image-repeat

Значение по умолчанию	нет
Применимо	ко всем элементам
Наследование	нет
Поддерживается браузерами	Safari 4.0 и выше Chrome 3.0 и выше

Пример

CSS

  
div {

border:1px solid #ccc;

-webkit-mask-box-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) 5px 10px 7px 3px round repeat;
}

По теме

Теги: маска изображения, вендорные свойства, Webkit (Safari, Chrome), css расширения, css extensions

Показать комментарии