Beispiel:CSS-mask-border.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mask-border</title>
<style>
.stamptiles {
-webkit-mask-box-image: url('https://wiki.selfhtml.org/images/8/8e/StampTiles.svg') 25% / 5% space;
mask-border: url('https://wiki.selfhtml.org/images/8/8e/StampTiles.svg') 25% / 5% fill;
}
img {
width: 15em;
}
#galerie {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));;
gap: 1em;
padding: 0;
}
figure {width: 100%;}
</style>
</head>
<body>
<div id="galerie">
<figure>
<img
src="https://wiki.selfhtml.org/images/8/8e/StampTiles.svg"
alt="StampTiles - gekachelte Perforation">
<figcaption>Kachel als Vorlage</figcaption>
</figure>
<figure>
<img class="stamptiles"
src="https://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg"
alt="Lauf an der Pegnitz">
<figcaption>Weder <code>-webkit-box-image</code> noch
<code>mask-border</code> funktionieren im Firefox!</figcaption>
</figure>
</div>
</body>
</html>