inset()
CSS inset() funksiyasi tayanch qutining (reference box) har bir tomonidan ko‘rsatilgan ichki masofalarda joylashgan to‘rtburchakni belgilaydi.
inset() funksiyasi clip-path xususiyati va shape-outside xususiyati bilan ishlatiladi.
Misol
Ikkita <div> elementini tayanch qutining har bir tomonidan ko‘rsatilgan ichki masofalarda joylashgan to‘rtburchak shaklida qirqing:
#blueDIV {
float: left;
width: 150px;
height: 100px;
background-color: lightblue;
clip-path: inset(15px);
}
#pinkDIV {
float: left;
width: 150px;
height: 100px;
background-color: pink;
clip-path: inset(5% 10% 15% 10% round 20px);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| inset() | 37 | 79 | 54 | 10.1 | 24 |
CSS sintaksisi
inset(length-percentage round border-radius)
| Qiymat | Tavsif |
|---|---|
| length-percentage | Majburiy. Tayanch qutidan yuqori, o‘ng, pastki va chap tomonlardagi siljishlarni bildiruvchi birdan to‘rttagacha argument (uzunlik yoki foizda) |
| round border-radius | Ixtiyoriy. Ichki to‘rtburchakning burchaklari yumaloqlangan bo‘lishi kerakligini belgilaydi |
| Versiya: | CSS Shape moduli, 1-daraja |
|---|
Ko‘proq misollar
Misol
clip-path va inset() animatsiyasi:
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: green;
animation: mymove 5s infinite;
clip-path: inset(10% round 20px);
}
@keyframes mymove {
50% {clip-path: inset(50% round 50px);}
}
O‘zingiz sinab ko‘ring »
Misol
inset(), clip-path va shape-outside’dan foydalanish:
#blueDIV {
float: left;
width: 150px;
height: 100px;
background-color: lightblue;
clip-path: inset(45px 50px 15px 0 round 50px);
shape-outside: inset(40px 40px 10px 0 round 50px);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: clip-path xususiyati.
CSS ma’lumotnomasi: shape-outside xususiyati.
CSS ma’lumotnomasi: circle() funksiyasi.
CSS ma’lumotnomasi: ellipse() funksiyasi.
CSS ma’lumotnomasi: polygon() funksiyasi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!