Вложение маски

Классы mask-origin-* задают mask-origin — область, в которую вписывается изображение маски: рамка, внутренний отступ или содержимое. Берите их, когда маска должна начинаться у края содержимого, а не у внешнего края рамки.

Пример

Области

Круглая маска прижата к началу и верху области (mask-inline-start-top, mask-repeat-none). Элемент с прозрачной рамкой и внутренним отступом. Пунктирная рамка показывает границы элемента с маской.

HTML

<div class="grid grid-col-1 sm:grid-col-3 gap-3">
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-corner mask-repeat-none mask-inline-start-top mask-origin-border"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-origin-border</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-corner mask-repeat-none mask-inline-start-top mask-origin-padding"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-origin-padding</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-corner mask-repeat-none mask-inline-start-top mask-origin-content"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-origin-content</code>
  </div>
</div>

CSS

/* Demo only. The Framework has no class for mask-image, so each example sets
   its own. The mask is inline on purpose: an example renders in a sandboxed
   frame with an opaque origin, and a mask image is fetched in CORS mode, so a
   file from the site is refused and the masked element disappears with it. */
.demo-mask-corner {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 2.5rem 2.5rem;
  mask-size: 2.5rem 2.5rem;
  border: 1rem solid transparent;
  padding: 1rem;
}

Классы

Класс	CSS	Значения
`mask-origin-content`	`mask-origin: content-box`	—
`mask-origin-padding`	`mask-origin: padding-box`	—
`mask-origin-margin`	`mask-origin: margin-box`	—
`mask-origin-border`	`mask-origin: border-box`	—
`mask-origin-fill`	`mask-origin: fill-box`	—
`mask-origin-stroke`	`mask-origin: stroke-box`	—
`mask-origin-viewbox`	`mask-origin: view-box`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Классы маски не задают саму маску: изображение маски (mask-image) задаётся в CSS проекта, как в примерах на этой странице.

Какую область выбрать

Класс	Маска отсчитывается от
`mask-origin-border`	внешнего края рамки — значение по умолчанию
`mask-origin-padding`	края внутреннего отступа
`mask-origin-content`	края содержимого
`mask-origin-fill`, `mask-origin-stroke`, `mask-origin-viewbox`	области заливки, обводки или `viewBox` элемента SVG

Начало маски работает вместе с положением и размером маски:

HTML

<div class="mask-origin-content mask-repeat-none mask-center mask-contain">…</div>

Ограничения

mask-origin-margin задаёт значение margin-box, которого нет у свойства mask-origin: браузер отбрасывает объявление, и маска отсчитывается от рамки.
mask-origin-fill, mask-origin-stroke и mask-origin-viewbox относятся к элементам SVG; у элемента HTML они действуют как mask-origin-border.
Начало маски не обрезает её: область, где элемент виден, задаёт обрезка маски.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

Документация

Содержание