Свойство -webkit-mask
Свойство -webkit-mask сокращенный способ задать свойства маски -webkit-mask-attachment, -webkit-mask-clip, -webkit-mask-origin, -webkit-mask-image, -webkit-mask-repeat, -webkit-mask-composite и -webkit-mask-box-image, позволяет одновременно определить, будет ли маска прокручиваться вместе с окном браузера, определить будет ли маска видима под границей элемента, если граница имеет прозрачные участки, определяет точку, с которой будет начинаться левый верхний угол маски, задать изображение, которое будет использоваться в качестве маски, определить каким образом будет повторяться маска, определить на какую часть элемента будет распространяться маска, а также задает изображение, которое будет применено к границе элемента в качестве маски.
Маска применяется для скрытия некоторых частей элемента.
В качестве маски может быть использовано любое изображение, причем прозрачные части маски делают элемент невидимым, непрозрачные — видимым, а полупрозрачные — полупрозрачными в зависимости от прозрачности маски.
Допустимые значения
- допустимые значения смотрите в -webkit-mask-attachment, -webkit-mask-clip, -webkit-mask-origin, -webkit-mask-image, -webkit-mask-repeat, -webkit-mask-composite и -webkit-mask-box-image
| Значение по умолчанию | нет |
|---|---|
| Применимо | ко всем элементам |
| Наследование | нет |
| Поддерживается браузерами |
|
Пример
div {
background-color:#ccc;
-webkit-mask:fixed border border -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) repeat-x border -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))) 5px 10px 7px 3px round repeat;
}
По теме
- Вендорные префиксы. Что это?
- CSS свойство –webkit-mask-position-x
- CSS свойство –webkit-mask-position-y
- CSS свойство -webkit-mask-size