CSS Masking - mask-border-outset 属性

上一页
下一页

CSS 属性 mask-border-outset 指定元素的蒙版边框设置在远离边框的距离。

mask-border-outset CSS 属性可以指定为 1、2、3 或 4 个值。每个值都是一个 <length> 或 <number>。不允许使用负值，否则将被视为无效值。应用值时，将考虑以下规则：

  • 如果指定了一个值，则将相同的出线应用于所有四个边。
  • 如果指定了两个值，则第一个出线分别应用于顶部和底部，第二个出线分别应用于左侧和右侧。
  • 如果指定了三个值，则第一个出线分别应用于顶部，第二个出线分别应用于左侧和右侧，第三个值应用于底部。
  • 如果指定了四个值，则输出将按指定的顺序（顺时针）应用于顶部、右侧、底部和左侧。

可能的值

CSS 属性 mask-border-outset 可以具有以下值之一：

  • <length>：蒙版边框外侧以长度单位指定为尺寸。
  • <number>：蒙版边框外侧指定为相应边框宽度的倍数。

适用于

所有 HTML 元素。如果是 SVG，它适用于容器元素，不包括 <defs> 元素和所有图形元素

语法


mask-border-outset = [<length>|<number>]{1,4}
注意：基于 Chromium 的浏览器支持此属性的旧版本 mask-box-image-outset，带有前缀，即 -webkit。

 -webkit-mask-border-outset = 3.5rem;

CSS mask-border-outset - 基本示例

以下示例演示了如何使用 CSS 属性 mask-border-outset，其中图像作为掩码边框传递，并指定了一个 outset 值，该值增加了图像和掩码边框之间的距离。


<html>
<head>
<style>
	 	* {
	 	 	 box-sizing: border-box;
	 	}

	 	.with-mask{
	 	 	 -webkit-mask-box-image-source: url("images/border.png");
	 	 	 -webkit-mask-box-image-slice: 80;
	 	 	 -webkit-mask-box-image-width: 120px; 	
	 	 	 -webkit-mask-box-image-repeat: round;
	 	 	 -webkit-mask-box-image-outset: 3.5rem;

	 	 	 -webkit-mask-border-source: url("images/border.png");
	 	 	 -webkit-mask-border-slice: 80;
	 	 	 -webkit-mask-border-width: 120px;
	 	 	 -webkit-mask-border-outset: 3.5rem;	
	 	 	 -webkit-mask-border-repeat: round;
	 	 	 -webkit-mask-border-mode: alpha;
	 	}
</style>
</head>
<body>
	 	<h1>The mask-border-outset Property</h1>

	 	<h3>With mask-border-outset</h3>
	 	<div class="with-mask">
	 	<img src="images/scenery.jpg" alt="mask border image" width="300" height="200">
	 	</div>
</body>
</html>
本页
上一页
下一页