Eigenschaft mask-clip

Die Eigenschaft mask-clip legt den Bereich eines Elements fest, innerhalb dessen die Maske angezeigt wird. Sie bestimmt, welche Teile des Elements von der Maskierung betroffen sind und welche sichtbar und unverändert bleiben.

Syntax

cssSelektor {
  mask-clip: Wert | no-clip;
}

Werte

Standardwert: border-box.

Beispiel . Anwendung von mask-clip auf verschiedene Bereiche

Vergleich verschiedener mask-clip-Werte auf einem Element mit Rändern und Abständen:

html<div class="box border-box">border-box</div>
<div class="box padding-box">padding-box</div>
<div class="box content-box">content-box</div>

css.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 20px;
  border: 10px dashed black;
  background: linear-gradient(45deg, red, blue);
  mask-image: linear-gradient(to right, black, transparent);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  display: inline-block;
}

.border-box {
  mask-clip: border-box;
}

.padding-box {
  mask-clip: padding-box;
}

.content-box {
  mask-clip: content-box;
}

Результат:

Beispiel . Verwendung von no-clip

Demonstration des no-clip-Werts, bei dem die Maske über die Grenzen des Elements hinausgeht:

html<div id="elem"></div>

css#elem {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, red, blue);
  mask-image: radial-gradient(circle, black 50%, transparent 70%);
  mask-size: 300px 300px;
  mask-position: center;
  mask-clip: no-clip;
  border: 2px solid black;
}

Результат:

Beispiel . SVG mit verschiedenen mask-clip-Werten

Anwendung verschiedener Werte auf ein SVG-Element:

html<svg width="400" height="200">
  <defs>
    <mask id="mask1" maskContentUnits="objectBoundingBox">
      <rect x="0.1" y="0.1" width="0.8" height="0.8" fill="white"/>
    </mask>
  </defs>
  
  <rect x="10" y="10" width="180" height="180" fill="blue" 
    mask="url(#mask1)" mask-clip="fill-box"/>
    
  <rect x="210" y="10" width="180" height="180" fill="red" 
    mask="url(#mask1)" mask-clip="view-box"/>
</svg>

Результат:

Siehe auch