mask-border-width

The mask-border-width CSS properti mengatur lebar elemen mask border.

Syntax

/* 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;

The mask-border-width properti dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai yang dipilih dari daftar nilai di bawah.

  • Ketika satu nilai ditentukan, ini menerapkan lebar yang sama ke keempat sisinya.
  • Ketika dua nilai ditentukan, lebar pertama diterapkan ke atas dan bawah, yang kedua setelah kiri dan kanan.
  • Ketika tiga nilai ditentukan, lebar pertama diterapkan ke atas, yang kedua setelah kiri dan kanan, yang kedua setelah bawah.
  • Ketika empat nilai ditentukan, lebar berlaku untuk atas, kanan, bawah, dan kiri dalam urutan itu (searah jarum jam).

Values

<length-percentage>
Lebar batas topeng, ditetapkan sebagai <length> atau <percentage>. Persentase relatif terhadap lebar area perbatasan untuk offset horizontal dan tinggi area perbatasan untuk offset vertikal. Tidak boleh negatif.
<number>
Lebar batas topeng, ditentukan sebagai kelipatan yang sesuai border-width. Tidak boleh negatif.
auto
Lebar batas topeng dibuat sama dengan lebar atau tinggi intrinsik (mana yang dapat diterapkan) yang sesuai mask-border-slice. Jika gambar tidak memiliki dimensi intrinsik yang diperlukan, sesuai border-width digunakan sebagai gantinya.

Formal definition

Initial valueauto
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Percentagesrelative to width/height of the mask border image area
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typediscrete

Formal syntax

[ <length-percentage> | <number> | auto ]{1,4}

where
<length-percentage> = <length> | <percentage>

Examples

Basic usage

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 mask-border-slice akan menyebabkan irisan diskalakan agar sesuai dengan topeng perbatasan.

mask-border-width: 30 fill;

Browser berbasis Chromium mendukung versi lama properti ini — mask-box-image-width — dengan awalan:

-webkit-mask-box-image-width: 20px;

Note: The mask-border Halaman menampilkan contoh yang berfungsi (menggunakan properti topeng perbatasan awalan kedaluwarsa yang didukung di Chromium), sehingga Anda bisa mendapatkan gambaran tentang efeknya.

Specifications

Specification Status Comment
CSS Masking Module Level 1
The definition of 'mask-border-width' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

TBD