CSS mask-clip属性值效果实例页面

展示

去论坛 »

border-box（默认）

padding-box

content-box

no-clip

//zxx: 接下来是与SVG元素遮罩相关的几个关键字值，仅Firefox浏览器支持

fill-box

stroke-box

view-box

代码

HTML：

<h4>border-box（默认）</h4>
<img src="/images/common/l/1.jpg" class="mask-image border-box">

<h4>padding-box</h4>
<img src="/images/common/l/1.jpg" class="mask-image padding-box">

<h4>content-box</h4>
<img src="/images/common/l/1.jpg" class="mask-image content-box">

<h4>no-clip</h4>
<img src="/images/common/l/1.jpg" class="mask-image no-clip">

<h4>fill-box</h4>
<svg width="280" height="140" viewbox="0 0 280 140">
    <ellipse cx="140" cy="70" rx="120" ry="50" class="mask-svg fill-box"></ellipse>
</svg>

<h4>stroke-box</h4>
<svg width="280" height="140" viewbox="0 0 280 140">
    <ellipse cx="140" cy="70" rx="120" ry="50"  class="mask-svg stroke-box"></ellipse>
</svg>

<h4>view-box</h4>
<svg width="280" height="140" viewbox="0 0 280 140">
    <ellipse cx="140" cy="70" rx="120" ry="50"  class="mask-svg view-box"></ellipse>
</svg>

CSS：

.mask-image {
    width: 200px; height: 150px;
    border: 20px solid deepskyblue;
    padding: 20px;
    background-color: deeppink;
    -webkit-mask-image: url(border-arc.png);
    mask-image: url(border-arc.png);
}
.padding-box {
    -webkit-mask-clip: padding-box;
    mask-clip: padding-box;
}
.content-box {
    -webkit-mask-clip: content-box;
    mask-clip: content-box;
}
.no-clip {
    -webkit-mask-clip: no-clip;
    mask-clip: no-clip;
}

.mask-svg {
    fill: deeppink;
    stroke: deepskyblue;
    stroke-width: 20px;

    -webkit-mask-image: url(border-arc.png);
    mask-image: url(border-arc.png);
}
.fill-box {
    -webkit-mask-clip: fill-box;
    mask-clip: fill-box;
}
.stroke-box {
    -webkit-mask-clip: stroke-box;
    mask-clip: stroke-box;
}
.view-box {
    -webkit-mask-clip: view-box;
    mask-clip: view-box;
}