Hoshiya tomonlari

CSS border — alohida tomonlar

Oldingi sahifalardagi misollardan har bir tomon uchun har xil chegara belgilash mumkinligini ko‘rdingiz.

CSS’da har bir chegara (yuqori, o‘ng, pastki va chap) uchun alohida xossalar ham bor:

Quyidagi misolda har bir chegara tomonining uslubini belgilash uchun yuqoridagi to‘rt xossadan foydalanamiz:

Misol

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

Natija:

Different Border Styles

O‘zingiz sinab ko‘ring »

Xuddi shu natijaga erishish uchun qisqartma border-style xossasidan ham foydalanishimiz mumkin.

Quyidagi misol yuqoridagi misol bilan bir xil natijani beradi:

Misol

p {
border-style: dotted solid;
}

Natija:

Different Border Styles

O‘zingiz sinab ko‘ring »

Shunday qilib, bu qanday ishlaydi:

Agar border-style xossasi to‘rt qiymatga ega bo‘lsa:

border-style: dotted solid double dashed;
- yuqori chegara nuqtali (dotted)
- o‘ng chegara yaxlit (solid)
- pastki chegara qo‘sh chiziqli (double)
- chap chegara shtrixli (dashed)

Agar border-style xossasi uch qiymatga ega bo‘lsa:

border-style: dotted solid double;
- yuqori chegara nuqtali (dotted)
- o‘ng va chap chegaralar uzluksiz (solid) bo‘ladi
- pastki chegara qo‘sh chiziqli (double)

Agar border-style xossasi ikki qiymatga ega bo‘lsa:

border-style: dotted solid;
- yuqori va pastki chegaralar nuqtali (dotted) bo‘ladi
- o‘ng va chap chegaralar uzluksiz (solid) bo‘ladi

Agar border-style xossasi bitta qiymatga ega bo‘lsa:

border-style: dotted;
- to‘rtala chegara ham nuqtali (dotted)

Misol

/* Four values */
p {
border-style: dotted solid double dashed;
}

/* Three values */
p {
border-style: dotted solid double;
}

/* Two values */
p {
border-style: dotted solid;
}

/* One value */
p {
border-style: dotted;
}

O‘zingiz sinab ko‘ring »

Yuqoridagi misolda border-style xossasi ishlatilgan. Biroq u border-width va border-color bilan ham ishlaydi.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish