From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/mask-border/index.html | 105 +++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 files/zh-cn/web/css/mask-border/index.html (limited to 'files/zh-cn/web/css/mask-border/index.html') diff --git a/files/zh-cn/web/css/mask-border/index.html b/files/zh-cn/web/css/mask-border/index.html new file mode 100644 index 0000000000..ecd3d44814 --- /dev/null +++ b/files/zh-cn/web/css/mask-border/index.html @@ -0,0 +1,105 @@ +--- +title: mask-border +slug: Web/CSS/mask-border +translation_of: Web/CSS/mask-border +--- +
{{cssref}}{{SeeCompatTable}}
+ +

CSS 属性 mask-border 允许你创建一个紧贴元素边框边缘的mask.

+ +

该属性为以下属性的简写: {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}}, and {{cssxref("mask-border-mode")}}. 与其他简写的属性一样，任何一个漏写的子属性，将会被设置为他们的初始值.

+ +

语法

+ +
/* source | slice */
+mask-border: url('border-mask.png') 25;
+
+/* source | slice | repeat */
+mask-border: url('border-mask.png') 25 space;
+
+/* source | slice | width */
+mask-border: url('border-mask.png') 25 / 35px;
+
+/* source | slice | width | outset | repeat | mode */
+mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
+
+ +

Values

+ +
+
<'mask-border-source'>
+
该属性为源图像. 参见 {{cssxref("mask-border-source")}}.
+
<'mask-border-slice'>
+
将源图像切割后的区域的尺寸，最多可指定四个值. 参见 {{cssxref("mask-border-slice")}}.
+
<'mask-border-width'>
+
边框mask的宽度. 最多可指定四个值. 参见 {{cssxref("mask-border-width")}}.
+
<'mask-border-outset'>
+
边框mask距离元素外边界的距离. 最多可指定四个值. 参见 {{cssxref("mask-border-outset")}}.
+
<'mask-border-repeat'>
+
定义如何调整源图像的边缘区域以适应边框mask的尺寸. 最多可指定四个值. 参见 {{cssxref("mask-border-repeat")}}.
+
<'mask-border-mode'>
+
定义是否将源图片设置为明亮度mask，或者透明度mask. 参见 {{cssxref("mask-border-mode")}}.
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

范例

+ +

Bitmap

+ +

在此范例中，我们将使用钻石图案来给元素添加mask. mask的源文件是一个 ".png" 文件，大小为 90像素 * 90 像素，三颗钻石垂直和水平交叉；

+ +

+ +

HTML

+ +
<div id="bitmap">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>
+ +

CSS

+ +

为了适应一个钻石的大小，我们使用90/3 或者30，用于设置将图像切割至边角以及边缘区域的值，并设置repeat属性为 round ，该属性使得切片均匀贴合，例如：没有裁剪和空隙.

+ +
div {
+  width: 200px;
+  background-color: lavender;
+  border: 18px solid salmon;
+  padding: 10px;
+
+  mask-border:
+    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
+    30 /         /* slice */
+    36px 18px    /* width */
+    round;       /* repeat */
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}{{Spec2("CSS Masks")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性Edit

+ +

TBD

-- cgit v1.2.3-54-g00ecf