CSS 遮罩原点属性
遮罩原点属性设置遮罩图像相对于长方体模型不同组件的位置。
语法:
mask-origin: Keyword values
/* Or */
mask-origin: Multiple values
/* Or */
mask-origin: Non-standard keyword values
/* Or */
mask-origin: Global values
属性值:该属性接受上面提到的和下面描述的值:
- 关键字值:该属性值是指用内容框、填充框、边距框、边框、填充框、描边框、视图框、等单位定义的值。
- 非标准关键字值:该属性值是指用填充、边框、内容等单位定义的值。
- 多个值:该属性值是指用填充框、填充框、视图框、边框、等单位定义的值。
- 全局值:该属性值是指用继承、取消设置、初始、等等单位定义的值
示例 1: 以下是使用边框框T6:说明遮罩来源属性的示例
<!DOCTYPE html>
<html>
<head>
<style>
.geeks{
width: 22%;
height: 200px;
background: green;
border: 10px solid red;
padding: 10px;
color:white;
-webkit-mask-image:
url("image.svg");
-webkit-mask-repeat:repeat;
mask-origin: border-box;
}
</style>
</head>
<body>
<div class="geeks"></div>
</body>
</html>
输出:
示例 2: 以下是使用内容框说明遮罩来源属性的示例:
<!DOCTYPE html>
<html>
<head>
<style>
.geeks{
width: 22%;
height: 200px;
background: green;
border: 10px solid red;
padding: 10px;
color:white;
-webkit-mask-image:
url("image.svg");
-webkit-mask-repeat:repeat;
mask-origin: content-box;
}
</style>
</head>
<body>
<div class="geeks"></div>
</body>
</html>
输出:
支持的浏览器:
- 铬
- 火狐浏览器
- 旅行队
- 边缘
- 歌剧
- 互联网浏览器(不支持)。
版权属于：月萌API www.moonapi.com，转载请注明出处
