offset-position
Misol
Elementning boshlang‘ich joylashuvi pastki o‘ng tomonda bo‘lishini belgilang:
#square {
width: 60px;
height: 60px;
background: blue;
offset-position: bottom right;
offset-path: ray(45deg);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
offset-position xususiyati elementning yo‘l bo‘ylab boshlang‘ich joylashuvini belgilaydi.
Agar offset-path funksiyasi o‘zining boshlang‘ich joylashuvini ko‘rsatmasa, offset-position qiymati element offset yo‘li bo‘ylab harakatlanishi uchun dastlab qayerga joylashtirilishini aniqlaydi.
| Standart qiymat: | normal |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.offsetPosition="auto" |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| offset-position | 116 | 116 | 122 | 16 | 102 |
CSS sintaksisi
offset-position: auto|normal|position|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| normal | Offset boshlang‘ich joylashuvini o‘z ichiga olgan blokning 50% 50% nuqtasiga o‘rnatadi. Bu standart qiymat. |
| auto | Offset boshlang‘ich joylashuvini element qutisining yuqori chap burchagiga o‘rnatadi |
| position | Elementni o‘z qutisi chetlariga nisbatan joylashtirish uchun joylashuvni x/y koordinata sifatida belgilaydi. Joylashuv birdan to‘rttagacha qiymat yordamida belgilanishi mumkin |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Turli offset boshlang‘ich joylashuvlarini ko‘ring:
#square1 {
width: 40px;
height: 40px;
background: pink;
text-align:center;
offset-position: bottom right;
offset-path: ray(45deg);
}
#square2 {
width: 40px;
height: 40px;
background: red;
text-align:center;
offset-position: top right;
offset-path: ray(25deg);
}
#square3 {
width: 40px;
height: 40px;
background: yellow;
text-align:center;
offset-position: normal;
offset-path: ray(45deg);
}
#square4 {
width: 40px;
height: 40px;
background: cyan;
text-align:center;
offset-position: auto;
offset-path: ray(95deg);
}
#square5 {
width: 40px;
height: 40px;
background: lavender;
text-align:center;
offset-position: 30% 70%;
offset-path: ray(120deg);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
SVG darsligi: SVG path
CSS darsligi: CSS animatsiyalar
CSS ma’lumotnomasi: CSS offset xususiyati
CSS ma’lumotnomasi: CSS offset-anchor xususiyati
CSS ma’lumotnomasi: CSS offset-distance xususiyati
CSS ma’lumotnomasi: CSS offset-path xususiyati
CSS ma’lumotnomasi: CSS offset-rotate xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!