CSS mask-clip属性值效果实例页面
展示
border-box(默认)
![](/images/common/l/1.jpg)
padding-box
![](/images/common/l/1.jpg)
content-box
![](/images/common/l/1.jpg)
no-clip
![](/images/common/l/1.jpg)
//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; }