CSS Хүрээний талууд

< 1 min read

Агуулга

CSS Border -тусдаа талууд

CSS Border -тусдаа талууд #

Өмнөх хуудсуудын жишээнүүдээс та тал тус бүрт өөр хүрээг зааж өгөх боломжтойг харсан.

CSS дээр хүрээ тус бүрийг (дээд, баруун, доод, зүүн) тодорхойлох шинж чанарууд бас байдаг.

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

Өөр хүрээний загвар

Дээрх жишээ нь үүнтэй ижил үр дүнг өгдөг.

p {
  border-style: dotted solid;
}

Тиймээс, энэ нь хэрхэн ажилладагийг энд харуулав.

Хэрэв border-style нь дөрвөн утгатай бол:

Хүрээний хэв маяг: тасархай цул давхар тасархай;
- дээд хүрээ нь цэгтэй
- баруун хүрээ хатуу байна
- доод хүрээ давхар байна
- зүүн хүрээ таслагдсан

Хэрэвborder-style нь гурван утгатай бол:

Хүрээний хэв маяг: цэгтэй хатуу давхар;
- дээд хүрээ нь цэгтэй
- баруун ба зүүн хүрээ хатуу байна
- доод хүрээ давхар байна

Хэрэвborder-style нь хоёр утгатай бол:

Хүрээний хэв маяг: тасархай цул;
- дээд ба доод хүрээ нь цэгтэй байна
- баруун ба зүүн хүрээ хатуу байна

Хэрэвborder-styleнь нэг утгатай бол:

Хүрээний хэв маяг: тасархай;
- дөрвөн хүрээ бүгд цэгтэй

/* 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;
}

border-style дээрх жишээнд ашигласан болно. Гэхдээ энэ нь мөн border-width ба border-color ашигласан.