Properti mask-clip CSS

Halaman sebelumnya mask
Halaman berikutnya mask-composite

Definisi dan penggunaan

mask-clip Properti digunakan untuk menentukan area yang dipengaruhi gambar penutup.

contoh

tunjukan mask-clip berbagai nilai properti:

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

Coba sendiri

Sintaks CSS

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

Nilai atribut

Nilai	Deskripsi
border-box	Isi yang digambarkan dipotong ke kotak batas border (border box). Nilai standar.
content-box	Isi yang digambarkan dipotong ke kotak konten (content box).
padding-box	Isi yang digambarkan dipotong ke kotak pengaturan luar (padding box).
fill-box	Isi yang digambarkan dipotong ke kotak batas objek (object bounding box).
stroke-box	Isi yang digambarkan dipotong ke kotak batas garis (stroke bounding box).
view-box	Gunakan viewport SVG paling dekat sebagai kotak referensi.
no-clip	Tidak ada potongan.
border	Sama seperti border-box.
padding	Sama seperti padding-box.
content	Sama seperti content-box.
text	Cukupkan masker potong ke teks elemen.
initial	Atur atribut ini ke nilai standarnya. Lihat initial.
inherit	Mengambil atribut ini dari elemen orangtua. Lihat inherit.

Detil teknis

Nilai standar:	border-box
Inheritance:	Tidak
Pembuatan animasi:	Tidak didukung. Lihat:Atribut berhubungan dengan animasi.
Versi:	Modul Masking CSS Level 1
语法 JavaScript:	object.style.maskClip="padding-box"