1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
title: mask-border-width
slug: Web/CSS/mask-border-width
translation_of: Web/CSS/mask-border-width
---
<div>{{CSSRef}}</div>
<p>The <strong><code>mask-border-width</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> properti mengatur lebar elemen <a href="/en-US/docs/Web/CSS/mask-border">mask border</a>.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css no-line-numbers notranslate">/* Keyword value */
mask-border-width: auto;
/* <length> value */
mask-border-width: 1rem;
/* <percentage> value */
mask-border-width: 25%;
/* <number> value */
mask-border-width: 3;
/* vertical | horizontal */
mask-border-width: 2em 3em;
/* top | horizontal | bottom */
mask-border-width: 5% 15% 10%;
/* top | right | bottom | left */
mask-border-width: 5% 2em 10% auto;
/* Global values */
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: unset;
</pre>
<p>The <code>mask-border-width</code> properti dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai yang dipilih dari daftar nilai di bawah.</p>
<ul>
<li>Ketika <strong>satu</strong> nilai ditentukan, ini menerapkan lebar yang sama ke <strong>keempat sisinya.</strong></li>
<li>Ketika <strong>dua</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas dan bawah</strong>, yang kedua setelah <strong>kiri dan kanan.</strong></li>
<li>Ketika <strong>tiga</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas</strong>, yang kedua setelah <strong>kiri dan kanan</strong>, yang kedua setelah <strong>bawah</strong>.</li>
<li>Ketika <strong>empat</strong> nilai ditentukan, lebar berlaku untuk <strong>atas</strong>, <strong>kanan</strong>, <strong>bawah</strong>, dan <strong>kiri</strong> dalam urutan itu (searah jarum jam).</li>
</ul>
<h3 id="Values">Values</h3>
<dl>
<dt><code><length-percentage></code></dt>
<dd>Lebar batas topeng, ditetapkan sebagai {{cssxref ("<length>")}} atau {{cssxref ("<percentage>")}}. Persentase relatif terhadap lebar area perbatasan untuk offset horizontal dan tinggi area perbatasan untuk offset vertikal. Tidak boleh negatif.</dd>
<dt><code><number></code></dt>
<dd>Lebar batas topeng, ditentukan sebagai kelipatan yang sesuai {{cssxref("border-width")}}. Tidak boleh negatif.</dd>
<dt><code>auto</code></dt>
<dd>Lebar batas topeng dibuat sama dengan lebar atau tinggi intrinsik (mana yang dapat diterapkan) yang sesuai {{cssxref("mask-border-slice")}}. Jika gambar tidak memiliki dimensi intrinsik yang diperlukan, sesuai <code>border-width</code> digunakan sebagai gantinya.</dd>
</dl>
<h2 id="Formal_definition">Formal definition</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax">Formal syntax</h2>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<h3 id="Basic_usage">Basic usage</h3>
<p>Properti ini tampaknya belum didukung di mana pun. Ketika akhirnya mulai didukung, itu akan berfungsi untuk menentukan lebar topeng perbatasan - mengatur ini ke nilai yang berbeda menjadi <code><a href="/en-US/docs/Web/CSS/mask-border-slice">mask-border-slice</a></code> akan menyebabkan irisan diskalakan agar sesuai dengan topeng perbatasan.</p>
<pre class="brush: css notranslate">mask-border-width: 30 fill;</pre>
<p>Browser berbasis Chromium mendukung versi lama properti ini — <code>mask-box-image-width</code> — dengan awalan:</p>
<pre class="brush: css notranslate">-webkit-mask-box-image-width: 20px;</pre>
<div class="blockIndicator note">
<p><strong>Note</strong>: The <code><a href="/en-US/docs/Web/CSS/mask-border">mask-border</a></code> Halaman menampilkan contoh yang berfungsi (menggunakan properti topeng perbatasan awalan kedaluwarsa yang didukung di Chromium), sehingga Anda bisa mendapatkan gambaran tentang efeknya.</p>
</div>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td>
<td>{{Spec2("CSS Masks")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>TBD</p>
|
