Egenskaben mask-clip

Egenskaben mask-clip indstiller området af et element, inden for hvilket masken vil blive vist. Den bestemmer, hvilke dele af elementet der vil blive påvirket af maskeringen, og hvilke der forbliver synlige uden ændringer.

Syntaks

cssselektor {
  mask-clip: værdi | no-clip;
}

Værdier

Standardværdi: border-box.

Eksempel . Anvendelse af mask-clip på forskellige områder

Sammenlign forskellige mask-clip-værdier på et element med kanter og polstring:

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;
}

Результат:

Eksempel . Brug af no-clip

Demonstration af no-clip-værdien, hvor masken går ud over elementets grænser:

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;
}

Результат:

Eksempel . SVG med forskellige mask-clip-værdier

Anvendelse af forskellige værdier på et 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>

Результат:

Se også