CSS border, border-radius va box-shadow: chegara, burchak, outline va soyalar

Qisqacha: Chegara border: 2px solid rang ko'rinishida yoziladi — uslub (masalan, solid) yozilmasa, u umuman chizilmaydi. border-radius burchaklarni yumaloqlaydi: kvadratga 50% — doira, to'rtburchakka 9999px — "tabletka". outline ham chiziq chizadi, lekin joy egallamaydi — fokus halqasi uchun aynan shu kerak. Soya — box-shadow: 0 4px 12px rang, shaffof shaklli rasmga esa filter: drop-shadow().

Bu darsda

• Chegarani qisqa va to'liq yozuvda, sakkiz uslubda va alohida tomonlarga berasiz.
• border-radius bilan doira, "tabletka" va elliptik shakl yasaysiz, ichki radiusni hisoblaysiz.
• outline va border farqini fokus halqasida qo'llaysiz, outline-offset ni sozlaysiz.
• Bir necha qatlamli, tabiiy ko'rinadigan box-shadow yozasiz va ichki soya berasiz.
• box-shadow bilan drop-shadow() farqini shaffof SVG'da ko'rsatasiz.

Oldin bilishingiz kerak: Box model, Ranglar 1 (shaffoflik), Holat pseudo-klasslari (:focus-visible), Overflow.

1. Nega bu kerak?

Overflow darsida «Bahor» kartalarini tartibga keltirdik. Lekin Jasur aka yana norozi: "Kartalar devorga yopishtirilgan qog'ozga o'xshaydi — tekis va o'tkir burchakli". U menyudagi taomlar stol ustida yotgandek ko'rinishini xohlaydi. Ikki karta — biri bugungi holatda, ikkinchisi dars oxiridagi holatda:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-matn: #1f2a24;
    --rang-fon: #fffaf0;
  }
  body {
    background-color: var(--rang-fon);
  }
  .taom-karta {
    width: 220px;
    margin-bottom: 20px;
    padding: 0 16px;
    border: 1px solid var(--rang-asosiy);
    background-color: white;
  }
  .taom-karta + .taom-karta {
    border-color: #c9d6cf;
    border-radius: 12px;
    box-shadow:
      0 1px 2px rgb(31 42 36 / 0.08),
      0 4px 12px rgb(31 42 36 / 0.1);
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>35 000 so'm</p>
</article>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>35 000 so'm</p>
</article>

Nimaga qarang: birinchi karta — qattiq yashil ramka va o'tkir burchaklar. Ikkinchisida burchaklar yumaloq, ramka yumshoq kulrang-yashil, ostida esa ko'zga zo'rg'a ilinadigan soya. U fondan biroz "ko'tarilgandek" ko'rinadi. Farq — atigi uch xususiyat: border, border-radius va box-shadow.

HTML qismida uch marta "ramkasini CSS belgilaydi" degan edik: hr ning ko'rinishi, iframe atrofidagi ramka va fieldset ning chizig'i. Bu darsda uchalasini ham bajaramiz.

2. border — chegara

2.1 Uch qism

CSS nima darsida border: 2px solid #2f6b3a ni ko'rgan edingiz. Uch qism, har biri — alohida to'liq yozuv:

• border-width — qalinlik: 2px, 0.125rem yoki thin, medium, thick.
• border-style — uslub: solid, dashed va boshqalar.
• border-color — rang. Yozilmasa — matn rangi (currentColor, Meros darsidan).

Uchalasining ichida faqat uslub majburiy. Chrome'da tekshirdik: border: 2px #2f6b3a — chegara umuman chiqmadi, DevTools Computed'da border-top-style: none va qalinlik 0px. Uslub yozilmasa, uning boshlang'ich qiymati none bo'ladi, none esa qalinlikni ham nolga tushiradi. Teskarisi: border: solid — 3 piksellik (medium), matn rangidagi chegara.

2.2 Sakkiz uslub

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  p {
    display: inline-block;
    width: 90px;
    margin: 6px;
    padding: 8px;
    border: 6px var(--rang-asosiy);
    text-align: center;
  }
</style>
<p style="border-style: solid">solid</p>
<p style="border-style: dashed">dashed</p>
<p style="border-style: dotted">dotted</p>
<p style="border-style: double">double</p>
<p style="border-style: groove">groove</p>
<p style="border-style: ridge">ridge</p>
<p style="border-style: inset">inset</p>
<p style="border-style: outset">outset</p>

Nimaga qarang: solid — yaxlit chiziq, dashed — shtrix, dotted — nuqtalar, double — ikki ingichka chiziq. Oxirgi to'rttasi rangni o'zi och va to'q qismlarga bo'lib, "o'yilgan" yoki "bo'rtib chiqqan" hajm yasaydi. Ular 1990-yillar interfeysini eslatadi, bugun kam ishlatiladi. double ga kamida 3 piksel kerak: ikki chiziq va orasidagi bo'shliq. Bu yerda style="..." — faqat misol qisqa bo'lsin deb, «Bahor»da inline stil CSP bilan to'silgan (CSS nima).

Yana ikki qiymat: none — chegara yo'q, hidden — ham yo'q (jadvallarda farqi bor, Jadvallar stili darsida).

2.3 Bir tomon

Faqat bitta tomonga chegara kerak bo'lsa — border-top, border-right, border-bottom, border-left. Ular ham qisqa yozuv: border-bottom: 2px solid var(--rang-asosiy). Faqat bitta qismni o'zgartirish uchun esa border-bottom-color kabi to'liq yozuv bor.

Bo'sh joylar va qator uzish darsida "sarlavha ostiga chiroyli chiziq kerak bo'lsa — bu CSS border, hr emas" degan edik. Mana shunday:

h2 {
  padding-bottom: 0.25em;
  border-bottom: 2px solid var(--rang-asosiy);
}

padding-bottom matnni chiziqdan biroz uzoqlashtiradi — chegara padding'dan tashqarida chiziladi (Box model). Matn yo'nalishiga moslashadigan border-inline va border-block ham bor — Mantiqiy xususiyatlar darsida.

2.4 HTML qismidagi uch va'da

Brauzer uch elementga o'z chegarasini beradi. Chrome'da o'lchadik: hr — 1px inset kulrang (tepa va past chiziq birga ikki piksellik "o'yiq" chiziq bo'ladi), iframe — 2px inset, fieldset — 2px groove. Uchalasini «Bahor» uslubiga keltiramiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-ikkinchi: #5b6660;
  }
  hr {
    border: none;
    border-top: 2px dashed var(--rang-asosiy);
  }
  iframe {
    border: 0;
  }
  fieldset {
    border: 1px solid var(--rang-ikkinchi);
    border-radius: 8px;
  }
</style>
<p>Osh — 35 000 so'm. Kabob — 32 000 so'm.</p>
<hr>
<p>Dushanba — sanitariya kuni.</p>
<iframe title="Xarita o'rni" width="240" height="60"
        srcdoc="<p>Bu yerda xarita bo'ladi</p>"></iframe>
<fieldset>
  <legend>Qaysi zal?</legend>
  <label><input type="radio" name="zal"> Ichkari</label>
  <label><input type="radio" name="zal"> Ayvon</label>
</fieldset>

Nimaga qarang: ajratgich chiziq endi yashil shtrix, ma'nosi esa o'zgarmadi — "mavzu o'zgardi" (Bo'sh joylar va qator uzish). Xarita o'rni ramkasiz, u sahifaning bir qismidek ko'rinadi. Zal tanlovi ingichka kulrang ramkada, burchaklari yumaloq. Guruh nomi (legend) esa baribir chiziq ustida turibdi.

Tafsilotlar:

• hr da avval border: none — brauzerning to'rt tomonlik inset chegarasini olib tashlaydi. Keyin faqat tepaga o'zimiznikini beramiz. Faqat border-top yozsangiz, pastki kulrang chiziq qolib ketadi.
• iframe darsida frameborder eskirgan, "ramkani CSS'da olib tashlaymiz" degan edik. Xarita xizmati kodidagi style="border:0;" ham endi shu qoidaga ko'chadi — HTML'da style qolmaydi.
• Guruhlash elementlari darsida "ramka yoqmasa, CSS bilan o'zgartirasiz" degan edik. Guruh ma'nosi joyida — ramka faqat ko'rinish.

Tekshirib ko'ring: p { border: 4px dashed; color: #b4461a; } — chegara qanday rangda chiqadi?

3. border-radius — yumaloq burchak

3.1 Bitta va to'rtta qiymat

border-radius: 12px — to'rt burchak ham 12 piksel radiusli chorak doira bo'lib yumaloqlanadi. Radius qancha katta bo'lsa, burchak shuncha "yumshoq". Burchakni tasavvur qilishning oson yo'li: burchakka shu radiusli tanga qo'ying va uning chetini chizing.

To'rt qiymat — tepa-chapdan boshlab soat mili bo'yicha: tepa-chap, tepa-o'ng, past-o'ng, past-chap. border-radius: 16px 16px 0 0 — faqat tepadagi burchaklar yumaloq. Bitta burchak uchun to'liq yozuv bor: border-top-left-radius.

Radius chegara bo'lmasa ham ishlaydi — fon, soya va outline ham yumaloqlanadi.

3.2 Doira va "tabletka"

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  p {
    margin: 12px 0;
    padding: 8px 16px;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
  }
  .doira {
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
  }
  .tuxum {
    width: 200px;
    border-radius: 50%;
  }
  .tabletka {
    width: 200px;
    border-radius: 9999px;
  }
</style>
<p class="doira"></p>
<p class="tuxum">❌ 50% — tuxum</p>
<p class="tabletka">✅ 9999px — tabletka</p>

Nimaga qarang: kvadratda 50% — tekis doira. To'rtburchakda esa 50% tuxumga o'xshash ellips beradi. 9999px bilan to'rtburchak ikki yon tomoni yarim doira bo'lgan "tabletka"ga aylandi — tugma va belgilar uchun ko'p ishlatiladigan shakl.

Nega bunday? Foizli radius ikki o'lchovdan hisoblanadi: gorizontal qismi — endan, vertikal qismi — bo'ydan. Chrome'da o'lchadik: quti padding bilan 232×37 piksel. Demak 50% — gorizontal 116, vertikal 18.5 piksellik ellips burchak.

9999px esa ikki yo'nalishda bir xil — doira burchak so'raydi. Bunchalik katta radius qutiga sig'maydi. Shunda brauzer hamma radiuslarni bir xil nisbatda kichraytiradi, toki ular sig'guncha. Natijada radius qisqa tomonning yarmiga tushadi — aynan tabletka.

3.3 Elliptik radius: /

Burchak doira emas, ellips bo'lishi mumkin. / dan oldin — gorizontal radiuslar, keyin — vertikallar:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  p {
    display: inline-block;
    width: 120px;
    height: 80px;
    margin: 8px;
    background-color: var(--rang-asosiy);
  }
  .bochka {
    border-radius: 50% / 20%;
  }
  .barg {
    border-radius: 80px 0;
  }
  .dog {
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    background-color: var(--rang-urgu);
  }
</style>
<p class="bochka"></p>
<p class="barg"></p>
<p class="dog"></p>

Nimaga qarang: birinchisi — yon tomonlari qavariq "bochka": gorizontal radius enning yarmi, vertikal esa bo'yning atigi 20 foizi. Ikkinchisi — barg: ikki qarama-qarshi burchak katta, ikkitasi o'tkir (80px 0 — ikki qiymat: tepa-chap va past-o'ng, keyin tepa-o'ng va past-chap). Uchinchisi — sakkiz xil radius bilan choy dog'iga o'xshash erkin shakl, bezak uchun.

3.4 Ichki radius formulasi

Chegara qalin bo'lsa, uning ichki cheti ham yumaloqlanadi — lekin kichikroq radius bilan:

ichki radius = tashqi radius − chegara qalinligi

Chegara 12 piksel, radius 16 bo'lsa — ichkarida 4 piksellik kichik yumaloqlik qoladi. Radius chegaradan kichik bo'lsa (8 < 12), natija manfiy chiqadi va ichki burchak butunlay o'tkir bo'ladi. Chrome'da ikkalasini chizdirdik — aynan shunday.

Xuddi shu qoida ichma-ich qutilarga ham tegishli. Kartaning radiusi 16, ichidagi rasm karta chetidan 8 piksel ichkarida (padding). Rasmga qancha radius kerak?

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    display: inline-block;
    width: 140px;
    margin: 8px;
    padding: 8px;
    border-radius: 16px;
    background-color: var(--rang-asosiy);
  }
  .rasm {
    height: 80px;
    background-color: #fde2c4;
  }
  .xato .rasm { border-radius: 16px; }
  .togri .rasm { border-radius: 8px; }
</style>
<div class="taom-karta xato"><div class="rasm">❌ 16px</div></div>
<div class="taom-karta togri"><div class="rasm">✅ 8px</div></div>

Nimaga qarang: chap kartada ichki burchaklar ham 16 piksel — burchaklarda yashil hoshiya qalinlashib ketgan, chiziqlar parallel emas. O'ngda ichki radius 8 = 16 − 8: yashil hoshiya butun aylana bo'ylab bir xil qalinlikda. Ko'z bu farqni sezadi, garchi sababini ayta olmasa ham.

Formula: ichki element radiusi = tashqi radius − oradagi masofa (padding va chegara). Natija 0 dan kichik bo'lsa — 0.

Yana bir holat: rasm kartaning chetiga taqalib turadi, padding yo'q. Kartaning border-radius i o'z fonini yumaloqlaydi, lekin ichidagi rasm burchaklari baribir o'tkir qoladi va karta burchagidan chiqib turadi. Tuzatish — Overflow darsidan: kartaga overflow: clip. Endi ortiqcha qism yumaloq chiziq bo'ylab kesiladi. Buni 3-mashqda qilasiz.

Tekshirib ko'ring: Tugma: border: 3px solid; border-radius: 10px;. Chegaraning ichki cheti qanday radiusda yumaloqlanadi? border-radius: 2px bo'lsa-chi?

4. outline — joy egallamaydigan chiziq

4.1 Hover va fokusda "sakrash"

Box model darsida ko'rgan edingiz: border joy egallaydi, outline — yo'q. Bu farq holat o'zgarganda ayniqsa sezilarli. Sichqonchani havolalar ustiga olib boring:

<style>
  :root {
    --rang-asosiy-toq: #1a5d1a;
  }
  a {
    margin-right: 12px;
  }
  .xato a:hover,
  .xato a:focus-visible {
    border: 3px solid var(--rang-asosiy-toq);
  }
  .togri a:hover,
  .togri a:focus-visible {
    outline: 3px solid var(--rang-asosiy-toq);
    outline-offset: 2px;
  }
</style>
<p class="xato">❌ <a href="#">Menyu</a> <a href="#">Bron</a>
<a href="#">Aloqa</a></p>
<p class="togri">✅ <a href="#">Menyu</a> <a href="#">Bron</a>
<a href="#">Aloqa</a></p>

Nimaga qarang: birinchi qatorda sichqoncha tushgan havola kengaydi, o'ngdagi qo'shnilari 6 pikselga surildi. Ikkinchi qatorda halqa paydo bo'ladi, lekin hech narsa qimirlamaydi. Bunday "sakrash" sichqonchani chalg'itadi: siz bosmoqchi bo'lgan havola qochib ketadi. Tab bilan ham sinab ko'ring — natija bir xil.

border baribir kerak bo'lsa, oldindan shaffof chegara bering: border: 3px solid transparent. Hover'da faqat border-color o'zgaradi, joy esa oldindan band.

4.2 outline ning xususiyatlari

• Qisqa yozuv border bilan bir xil: outline: 3px solid rang (outline-width, outline-style, outline-color).
• Tomonlari alohida emas. outline-top degan narsa yo'q — halqa doim to'rt tomonda.
• Burchakka ergashadi. Chrome'da tekshirdik: border-radius: 12px elementda halqa ham yumaloq chizildi.
• outline-offset — halqa va element orasidagi masofa. Musbat qiymat halqani tashqariga uzoqlashtiradi. Manfiy qiymat — ichkariga oladi. Bu Overflow darsidagi overflow: hidden karta ichida halqa kesilmasligi uchun kerak.
• outline-style: auto — brauzerning o'z halqasi (Chrome'da ikki rangli). Uni o'zgartirmasangiz, shu chiqadi.

4.3 Fokus halqasini to'g'ri qilish

Holat pseudo-klasslari darsidagi qoida o'z kuchida: halqani o'chirmang, almashtiring. «Bahor»dagi namuna:

:focus-visible {
  outline: 3px solid var(--rang-asosiy-toq);
  outline-offset: 2px;
}

Halqa fonga nisbatan yaxshi ko'rinishi kerak — WCAG interfeys elementlari uchun kamida 3:1 kontrast talab qiladi. --rang-asosiy-toq qaymoq fonda 7.7:1 beradi.

Internetda halqani soya bilan yasash ham uchraydi: outline: none; box-shadow: 0 0 0 3px rang. Bu xavfli. Windows'da majburiy ranglar rejimi (forced colors) bor — ko'rish qobiliyati past odamlar yoqadigan yuqori kontrast rejimi. MDN'ga ko'ra, bu rejim box-shadow ni butunlay o'chiradi, outline ni esa saqlaydi (faqat rangini almashtiradi). Soyali halqa shu odamlarga ko'rinmay qoladi.

Soya baribir kerak bo'lsa, qo'shimcha shaffof halqa qoldiring: outline: 3px solid transparent. Oddiy rejimda u ko'rinmaydi, majburiy ranglarda esa ko'rinadigan rangga aylanadi. To'liq fokus dizayni — CSS'da accessibility darsida.

Tekshirib ko'ring: Kartaga overflow: hidden berilgan. Ichidagi havolaning fokus halqasi (outline-offset: 2px) karta chetida kesilyapti. outline ga tegmasdan, faqat bitta qiymatni o'zgartirib qanday tuzatasiz?

5. box-shadow — soya

5.1 To'rt son va rang

Stol ustida chiroq yonib turibdi. Uning ostidagi har narsa stolga soya tashlaydi. Chiroq biroz tepada va oldinda bo'lsa, soya pastga siljiydi. Chiroq katta va yumshoq nurli bo'lsa, soya chekkalari xira bo'ladi. box-shadow aynan shu manzarani chizadi:

box-shadow: 0 4px 12px 0 rgb(31 42 36 / 0.25);
/*          x  y  xira kenglik rang */

• x va y — soyaning siljishi: musbat x — o'ngga, musbat y — pastga. Majburiy.
• xiralik (blur) — chekka qanchalik yumshoq. 0 — qattiq chekka. Manfiy bo'lmaydi.
• kengayish (spread) — soya elementdan qancha katta yoki kichik. Manfiy bo'lishi mumkin.
• rang — odatda shaffof qora yoki matn rangi. Yozilmasa — currentColor.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  body {
    background-color: var(--rang-fon);
  }
  p {
    display: inline-block;
    width: 110px;
    margin: 14px;
    padding: 16px 8px;
    border-radius: 8px;
    background-color: white;
    text-align: center;
  }
  .qattiq { box-shadow: 4px 4px 0 var(--rang-asosiy); }
  .yumshoq { box-shadow: 0 4px 12px rgb(31 42 36 / 0.25); }
  .halqa { box-shadow: 0 0 0 4px var(--rang-asosiy); }
  .past { box-shadow: 0 10px 8px -8px rgb(31 42 36 / 0.5); }
</style>
<p class="qattiq">qattiq</p>
<p class="yumshoq">yumshoq</p>
<p class="halqa">halqa</p>
<p class="past">faqat past</p>

Nimaga qarang, chapdan o'ngga:

• qattiq — xiralik 0: yashil nusxa o'ngga va pastga siljigan. "Retro" uslubdagi tugmalar.
• yumshoq — siljish faqat pastga, xiralik 12: karta ko'tarilgandek. Eng ko'p ishlatiladigan tur.
• halqa — siljish ham, xiralik ham 0, faqat kengayish: element atrofida 4 piksellik "chegara". U joy egallamaydi.
• faqat past — kengayish manfiy (−8): soya kichraydi va faqat pastdan ko'rinadi.

Soya ham outline kabi joy egallamaydi va border-radius ga ergashadi. Kartaga soya qo'shsangiz, qo'shnilari surilmaydi. Lekin otasida overflow: hidden bo'lsa, u ota chetidan chiqqan soyani kesib tashlaydi.

5.2 inset — ichki soya

inset so'zi soyani ichkariga, element chegarasi ichiga ag'daradi. Bosilgan tugma yoki "botiq" maydon hissi beradi:

<style>
  :root {
    --rang-ikkinchi: #5b6660;
  }
  input {
    padding: 8px;
    border: 1px solid var(--rang-ikkinchi);
    border-radius: 6px;
    box-shadow: inset 0 2px 6px rgb(31 42 36 / 0.35);
  }
</style>
<label>Ismingiz <input type="text" autocomplete="name"></label>

Nimaga qarang: maydonning yuqori ichki chetida yupqa soya bor — xuddi yuzasi biroz pastga botgandek. Ichki soya chegara ichida, padding va fon ustida chiziladi, matn esa soya ustida qoladi.

5.3 Ko'p qatlamli, tabiiy soya

Haqiqiy dunyoda soya bitta emas. Narsaning ostida qattiqroq, qoraroq qism bor, atrofida esa keng va juda xira yoyilgan qism. Vergul bilan bir necha soya yozsangiz, brauzer ularni ustma-ust chizadi — birinchisi eng ustda:

<style>
  :root {
    --rang-fon: #fffaf0;
  }
  body {
    background-color: var(--rang-fon);
  }
  p {
    display: inline-block;
    width: 130px;
    margin: 20px;
    padding: 24px 8px;
    border-radius: 12px;
    background-color: white;
    text-align: center;
  }
  .bitta {
    box-shadow: 0 8px 16px rgb(0 0 0 / 0.4);
  }
  .qatlam {
    box-shadow:
      0 1px 2px rgb(31 42 36 / 0.08),
      0 4px 8px rgb(31 42 36 / 0.08),
      0 12px 24px rgb(31 42 36 / 0.1);
  }
</style>
<p class="bitta">bitta, qora</p>
<p class="qatlam">uch qatlam</p>

Nimaga qarang: chapdagi soya og'ir va iflos ko'rinadi — to'q kulrang dog' kartaning tagiga yopishgan. O'ngdagi soya yengil: kartaning tagida ingichka aniq chiziq, atrofida esa havo kabi yumshoq yoyilish. Qatlamlar siri: har keyingisi ikki baravar uzoqroq va xiraroq, har birining shaffofligi esa atigi 8–10 foiz.

Ikki maslahat:

• Sof qora emas. Soya rangini fon yoki matn rangining to'q varianti qiling. Bu yerda rgb(31 42 36) — «Bahor»ning matn rangi (#1f2a24). Qaymoq fonda sof qora soya "kir" ko'rinadi. Ranglar 3 darsidagi color-mix(in oklch, var(--rang-matn) 10%, transparent) ham xuddi shu ishni qiladi.
• Soya — balandlik belgisi. Kichik soya — element stolga yaqin, katta va xira soya — baland ko'tarilgan. Menyu kartasi — kichik soya, ochilgan oyna — katta. Bitta sahifada soyalar tartibsiz bo'lmasin: 2–3 ta "balandlik"ni tanlab, hamma joyda shularni ishlating. Buni Dizayn tokenlari darsida tizimga aylantiramiz.

Tekshirib ko'ring: box-shadow: 0 0 0 2px #2f6b3a, 0 0 0 4px #b4461a; — element atrofida nechta rangli halqa ko'rinadi va qaysi rang ichkarida?

6. drop-shadow() — shaklning soyasi

box-shadow doim qutining soyasi. Element ichida shaffof joylari bo'lgan rasm bo'lsa — masalan, SVG barg — soya baribir to'rtburchak chiqadi. Shaklning o'zi soya tashlashi uchun filter: drop-shadow() kerak. filter — elementga rasm muharriridagidek effekt beradigan xususiyat, drop-shadow() esa uning bitta effekti:

<style>
  :root {
    --rang-fon: #fffaf0;
  }
  body {
    background-color: var(--rang-fon);
  }
  svg {
    margin: 16px;
  }
  .quti {
    box-shadow: 4px 6px 6px rgb(31 42 36 / 0.4);
  }
  .shakl {
    filter: drop-shadow(4px 6px 3px rgb(31 42 36 / 0.4));
  }
</style>
<svg class="quti" width="100" height="100" viewBox="0 0 100 100"
     aria-hidden="true">
  <path d="M50 6 C82 22 94 60 50 94 C6 60 18 22 50 6 Z"
        fill="#2f6b3a"/>
</svg>
<svg class="shakl" width="100" height="100" viewBox="0 0 100 100"
     aria-hidden="true">
  <path d="M50 6 C82 22 94 60 50 94 C6 60 18 22 50 6 Z"
        fill="#2f6b3a"/>
</svg>

Nimaga qarang: chapdagi barg atrofida ko'rinmas to'rtburchak quti bor ekan — soya aynan shu qutiga tushdi. O'ngdagi soya bargning o'zi bo'ylab, uning shaklini takrorlaydi. drop-shadow() rasmning shaffof bo'lmagan piksellariga qarab soya chizadi.

Farqlari:

drop-shadow() elementning hamma ichidagi narsasiga — matn va bolalariga ham ta'sir qiladi. filter ning boshqa funksiyalari (xiralashtirish, oq-qora) — Filterlar darsida.

7. Ko'p uchraydigan xatolar

7.1 Chegara chiqmadi

border: 2px #2f6b3a; — uslub yo'q, demak none. Tuzatish: border: 2px solid #2f6b3a;.

7.2 Tabletka o'rniga tuxum

To'rtburchak tugmaga border-radius: 50% — ellips chiqdi. Tuzatish: 9999px yoki qisqa tomonning yarmi.

7.3 Hover'da elementlar sakraydi

Holatga border qo'shildi — qo'shnilar surildi. Tuzatish: outline yoki oldindan border: ... transparent, holatda faqat rang.

7.4 Halqa faqat soyada

outline: none + box-shadow halqa — majburiy ranglar rejimida fokus yo'qoladi. Tuzatish: outline ishlating yoki outline: 3px solid transparent qo'shing.

7.5 Soya kesildi

Kartaning pastki soyasi yo'q bo'lib qoldi — otasida overflow: hidden. Tuzatish: otaga padding bering yoki kesish haqiqatan kerakmi — o'ylab ko'ring (Overflow).

7.6 Rasm burchaklari chiqib turibdi

Karta yumaloq, ichidagi rasm esa o'tkir burchakli. Tuzatish: kartaga overflow: clip yoki rasmga ichki radius formulasi bo'yicha o'z border-radius i.

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Radiuslarni hisoblang

Karta: border: 4px solid; border-radius: 20px; padding: 12px;. Ichida, padding'ning ichki chetiga taqalgan rasm bor.

• Chegaraning ichki cheti radiusi — piksel.
• Rasmga beriladigan radius — piksel.
• Karta radiusi 12 bo'lsa, rasm radiusi — piksel.

Ishora: "Ichki radius formulasi" — tashqi radiusdan oradagi masofani ayiring.

2-mashq (o'rta): "Stolni band qilish" tugmasi

«Bahor»ning bron-havola class'li havolasi (Box model darsida unga padding va yashil fon bergan edik) tugmaga o'xshasin:

1. Shakli — tabletka.
2. Sichqoncha ustida chegarasi to'q yashil bo'lsin, lekin tugma ham, qo'shnilari ham qimirlamasin.
3. Klaviatura fokusida — 3 piksellik to'q yashil halqa, tugmadan 3 piksel uzoqda.
4. Tagida kichik yumshoq soya.

Ishora: 2-band — oldindan berilgan shaffof chegara ("Hover va fokusda sakrash" bo'limi). Halqa outline bilan, soya bitta qatlam yetarli.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-asosiy-toq: #1a5d1a;
    --rang-fon: #fffaf0;
  }
  .bron-havola {
    padding: 0.5em 1.25em;
    border: 3px solid transparent;
    border-radius: 9999px;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
    box-shadow: 0 2px 6px rgb(31 42 36 / 0.25);
  }
  .bron-havola:hover {
    border-color: var(--rang-asosiy-toq);
  }
  .bron-havola:focus-visible {
    outline: 3px solid var(--rang-asosiy-toq);
    outline-offset: 3px;
  }
</style>
<p><a class="bron-havola" href="bron/">Stolni band qilish</a>
yoki <a href="menyu/">menyuni ko'ring</a></p>

3-mashq (qiyin): Menyu kartasi to'liq

Karta: tepada rasm o'rni (hozircha rangli blok), ostida nom va narx. Talablar:

1. Karta burchaklari 16 piksel, ichidagi rasm o'rni karta chetiga taqalgan — padding yo'q, burchaklari karta bilan bir xil yumaloq.
2. Uch qatlamli yumshoq soya.
3. Karta yangi taom kartasi (class="taom-karta yangi"). Rasm o'rnining chap-yuqori burchagida "Yangi" belgisi — 56 piksellik doira. Belgi HTML'da emas, ::before bilan chizilsin.
4. Karta sichqoncha ostida biroz "ko'tarilsin": soya kattalashsin, hech narsa surilmasin.

Ishora: 1-band uchun rasmga radius bermang — kartaga overflow: clip (Overflow). Doiraga kvadrat kerak. ::before ga o'lcham berish uchun unga display: block (Pseudo-elementlar).

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  body {
    background-color: var(--rang-fon);
  }
  .taom-karta {
    width: 220px;
    border-radius: 16px;
    overflow: clip;
    background-color: white;
    box-shadow:
      0 1px 2px rgb(31 42 36 / 0.08),
      0 4px 8px rgb(31 42 36 / 0.08),
      0 12px 24px rgb(31 42 36 / 0.1);
  }
  .taom-karta:hover {
    box-shadow:
      0 2px 4px rgb(31 42 36 / 0.08),
      0 8px 16px rgb(31 42 36 / 0.1),
      0 24px 48px rgb(31 42 36 / 0.12);
  }
  .rasm {
    height: 120px;
    padding: 8px;
    background-color: #fde2c4;
  }
  .taom-karta.yangi .rasm::before {
    content: "Yangi";
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
    line-height: 56px;
    text-align: center;
  }
  .taom-nomi,
  .narx {
    margin: 0;
    padding: 12px 16px 0;
  }
  .narx {
    padding-bottom: 12px;
    color: var(--rang-urgu);
  }
</style>
<article class="taom-karta yangi">
  <div class="rasm"></div>
  <h3 class="taom-nomi">Manti</h3>
  <p class="narx">30 000 so'm</p>
</article>

4-mashq: Portfolio qadami — yumshoq kartalar

Portfoliongizda uch joyda ramka bor: loyiha kartalari (h1 ~ article), savol-javob bloklari (details[name="savollar"]) va aloqa formasidagi fieldset.

1. Uchalasiga ham 0.5rem radius bering.
2. fieldset ning brauzer bergan groove chegarasini portfolio chegarasi bilan almashtiring — kartalardagidek.
3. Loyiha kartalariga ikki qatlamli yengil soya qo'shing. Soya rangi — portfolio matn rangidan.
4. Klaviatura bilan kartadagi havolaga o'ting: fokus halqasi to'g'ri ko'rinayotganini tekshiring.

Ishora: chegara rangi — --rang-chegara (CSS o'zgaruvchilari 2 da uni --karta-chegara orqali olgan bo'lsangiz, shu yo'lni davom ettiring). Matn rangidan shaffof soya — color-mix(in oklch, var(--rang-matn) 10%, transparent) (Ranglar 3).

h1 ~ article,
details[name="savollar"],
fieldset {
  border: 1px solid var(--karta-chegara, var(--rang-chegara));
  border-radius: 0.5rem;
}

h1 ~ article {
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--rang-matn) 8%, transparent),
    0 4px 12px color-mix(in oklch, var(--rang-matn) 10%, transparent);
}

9. Real ishda

• Kartalar va tugmalar — deyarli har saytda radius + yengil soya. Google'ning Material Design tizimida elementning "balandligi" aynan soya bilan ko'rsatiladi.
• Dizayn tizimlari soyalarni 3–5 ta nomli darajada saqlaydi ("kichik", "o'rta", "katta") — Dizayn tokenlari darsida.
• Fokus halqasi — accessibility auditining birinchi bandi. outline: none topilsa, deyarli har doim xato deb yoziladi.
• Ikonkalar va logotiplar — shaffof PNG yoki SVG, soya drop-shadow() bilan.
• Intervyuda so'raladi: "outline va border farqi?", "Doira qanday yasaladi va to'rtburchakda 50% nima beradi?", "box-shadow va drop-shadow() farqi?".

Xulosa

• border = qalinlik + uslub + rang; uslubsiz chegara yo'q, rangsiz — matn rangida.
• border-radius: kvadratga 50% — doira, to'rtburchakka 9999px — tabletka, / — elliptik burchak.
• Ichki radius = tashqi radius − oradagi masofa; manfiy chiqsa — 0.
• outline joy egallamaydi, radiusga ergashadi — fokus halqasi uchun; outline-offset masofani boshqaradi.
• box-shadow: x y xiralik kengayish rang; inset — ichki; ko'p yengil qatlam — tabiiy soya.
• Shaffof shakl soyasi — filter: drop-shadow().

Keyingi dars: Fonlar — fonga rang, rasm va bir nechta qatlamni joylashtirish, o'lchami va takrorlanishini boshqarish.

Manbalar

• MDN: "border", "border-style", "border-radius", "outline", "outline-offset", "box-shadow", "drop-shadow()", "@media (forced-colors)" — developer.mozilla.org
• W3C: "CSS Backgrounds and Borders Module Level 3" — w3.org/TR/css-backgrounds-3
• W3C: "Web Content Accessibility Guidelines 2.2", 1.4.11 Non-text Contrast, 2.4.7 Focus Visible — w3.org/TR/WCAG22