CSS outline
CSS kontur (outline)
Outline — elementni "ajralib turishini" ta’minlash uchun elementlar atrofida, chegaralardan TASHQARIDA chiziladigan chiziqdir.
Bu element qora chegara va 5px kenglikdagi yashil outline’ga ega.
O‘zingiz sinab ko‘ring »
Eslatma: Tashqi kontur (outline) chegaralardan (borders) farq qiladi! Kontur element chegarasidan tashqarida chiziladi va boshqa tarkib ustiga tushishi mumkin. Shuningdek, kontur element o‘lchamlarining bir qismi EMAS; elementning umumiy kengligi va balandligiga kontur kengligi ta’sir qilmaydi.
CSS’da quyidagi outline xossalari mavjud:
outline-style— outline uslubini belgilaydioutline-color— outline rangini belgilaydioutline-width— outline kengligini belgilaydioutline-offset— outline va element cheti/chegarasi orasiga bo‘shliq qo‘shadi-
outline- A shorthand property
CSS outline-style xossasi
outline-style xossasi outline uslubini belgilaydi va quyidagi qiymatlardan biriga ega bo‘lishi mumkin:
dotted— nuqtali outline belgilaydidashed— chiziqchali outline belgilaydisolid— uzluksiz chiziqli outline belgilaydidouble— qo‘sha outline belgilaydigroove— 3D o‘yilgan outline belgilaydiridge— 3D qabariq outline belgilaydiinset— 3D ichkariga outline belgilaydioutset— 3D tashqariga outline belgilaydinone— outlinesiz belgilaydihidden— yashirin outline belgilaydi
Quyidagi misol turli outline-style qiymatlarini ko‘rsatadi:
Misol
Turli outline uslublarining ko‘rsatmasi:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Natija:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
Chuqur kontur. Effekt kontur-rang qiymatiga bog'liq.
Tog'ning konturi. Effekt kontur-rang qiymatiga bog'liq.
Kiritilgan kontur. Effekt kontur-rang qiymatiga bog'liq.
Boshlanish sxemasi. Effekt kontur-rang qiymatiga bog'liq.
Eslatma: outline-style xossasi belgilanmaguncha, boshqa hech bir outline xossasi (ular haqida keyingi boblarda batafsil o‘rganasiz) HECH QANDAY ta’sir ko‘rsatmaydi!
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!