mask-clip
En esta página
| Clase | Propiedades CSS |
|---|---|
mask-clip-border |
mask-clip: border-box; |
mask-clip-padding |
mask-clip: padding-box; |
mask-clip-content |
mask-clip: content-box; |
mask-clip-fill |
mask-clip: fill-box; |
mask-clip-stroke |
mask-clip: stroke-box; |
mask-clip-view |
mask-clip: view-box; |
mask-no-clip |
mask-clip: no-clip; |
Examples#
Basic example#
Use utilities like mask-clip-border, mask-clip-padding, and mask-clip-content to control the bounding box of an element's mask:
{
mask-clip-border
mask-clip-padding
mask-clip-content
{/ prettier-ignore /}
<!-- [!code classes:mask-clip-border,mask-clip-padding,mask-clip-content] -->
<div class="mask-clip-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-clip-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-clip-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>