mask-clip
Misol
mask-clip xususiyatining turli qiymatlarini ko‘rsating:
.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;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
mask-clip xususiyati maska rasmi qaysi sohaga ta’sir qilishini belgilaydi.
| Standart qiymat: | border-box |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS Masking moduli, 1-daraja |
| JavaScript sintaksisi: | object.style.maskClip="padding-box" |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| mask-clip | 120 | 120 | 53 | 15.4 | 106 |
CSS sintaksisi
mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| border-box | Chizilgan kontent chegara qutisi (border box) bo‘yicha qirqiladi. Bu standart qiymat |
| content-box | Chizilgan kontent kontent qutisi (content box) bo‘yicha qirqiladi |
| padding-box | Chizilgan kontent padding qutisi (padding box) bo‘yicha qirqiladi |
| fill-box | Chizilgan kontent obyektni chegaralovchi quti (object bounding box) bo‘yicha qirqiladi |
| stroke-box | Chizilgan kontent chiziqni chegaralovchi quti (stroke bounding box) bo‘yicha qirqiladi |
| view-box | Eng yaqin SVG viewport’dan tayanch quti sifatida foydalanadi |
| no-clip | Qirqilmaydi |
| border | border-box bilan bir xil |
| padding | padding-box bilan bir xil |
| content | content-box bilan bir xil |
| text | Maskani element matni bo‘yicha qirqadi |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Tegishli sahifalar
CSS ma’lumotnomasi: mask xususiyati
CSS ma’lumotnomasi: mask-composite xususiyati
CSS ma’lumotnomasi: mask-image xususiyati
CSS ma’lumotnomasi: mask-mode xususiyati
CSS ma’lumotnomasi: mask-position xususiyati
CSS ma’lumotnomasi: mask-repeat xususiyati
CSS ma’lumotnomasi: mask-size xususiyati
CSS darsligi: CSS masking
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!