shape-outside
Misol
Inline kontent rasm atrofida aylana shaklida o‘ralsin:
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
shape-outside xususiyati inline kontent o‘ralib o‘tadigan shaklni belgilash imkonini beradi. Sukut bo‘yicha inline kontent elementning margin qutisi atrofida o‘raladi, shape-outside yordamida esa bu o‘ralishni sozlashingiz mumkin.
shape-outside xususiyati float elementlar uchun float sohasini belgilaydi. Bu float sohasi inline kontent float elementlar atrofida qaysi shakl bo‘ylab o‘ralishini belgilaydi.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | basic-shape uchun ha. animatable haqida o‘qing |
| Versiya: | CSS Shapes moduli, 1-daraja |
| JavaScript sintaksisi: | object.style.shapeOutside="circle(50%)" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| shape-outside | 37 | 79 | 62 | 10.1 | 24 |
CSS sintaksisi
shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| none | Bu standart qiymat. Float sohasiga ta’sir qilinmaydi. Inline kontent elementning margin qutisi atrofida o‘raladi |
| margin-box | Tashqi margin cheti bilan chegaralangan shaklni belgilaydi |
| border-box | Tashqi border cheti bilan chegaralangan shaklni belgilaydi |
| padding-box | Tashqi padding cheti bilan chegaralangan shaklni belgilaydi |
| content-box | Tashqi kontent cheti bilan chegaralangan shaklni belgilaydi. Bu qutining har bir burchak radiusi 0 va border-radius - border-width - padding qiymatlarining kattarog‘iga teng |
| basic-shape | Float sohasi inset(), circle(), ellipse() yoki polygon() funksiyasi hosil qilgan shaklga asoslanadi |
| url(image) | Float sohasi shape-image-threshold orqali belgilanganidek, ko‘rsatilgan image rasmining alfa kanaliga asoslanadi |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!