CSS Хүрээ /Border/

CSS border нь элементийн хил хязгаарын өргөн, өнгөний хэв маягийг тодорхойлдог.

Бүх талд хүрээ хийв

Зөвхөн доод талд хүрээ хийв

Хүрээний буланд радиус хийв

Хүрээнд дэвсгэр өнгө хийв

CSS Border Style

border-style шинж чанарт хүрээний хил ямар харагдахыг зааж өгдөг.

Жишээ нь

<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>

Үр дүнг харах

CSS Хүрээний өргөн /Border width/

border-width шинж чанарт хүрээний хилийн өргөнийг зааж өгдөг.
Хүрээний өргөний хэмжээг (px, pt, cm, em гэх мэт) хэмжих нэгжээр зааж өнгө.
Эсвэл урьдчилсан тодорхойлсон thin, medium, thick гэсэн гурван янзын хэмжээг ашиглаж болно.

Жишээ нь

<style>
p.neg {
  border-style: solid;
  border-width: 8px;
}
p.hoer {
  border-style: solid;
  border-width: thick;
}
p.guraw {
  border-style: solid;
  border-width: medium;
}
p.duruw {
  border-style: solid;
  border-width: thin;
}
p.tab {
  border-style: double;
  border-width: 15px;
}
p.zurgaa {
  border-style: double;
  border-width: thick;
}
p.doloo {
  border-style: double;
  border-width: medium;
}
p.naim {
  border-style: double;
  border-width: thin;
}
</style>

Үр дүнг харах

CSS Хүрээний талуудын өргөн /Specific Side Widths/

border-width шинж чанарт хүрээний дөрвөн талын өргөнийг өөр өөрөөр зааж өгч болно. Дараалал нь (Дээд тал, Баруун тал, Доод тал, Зүүн тал)

Жишээ нь

<style>
p.neg {
  border-style: solid;
  border-width: 10px 30px; /* 10px дээд болон доод, 30px зүүн болон баруун */
}
p.hoer {
  border-style: solid;
  border-width: 30px 10px; /* 30px дээд болон доод, 10px зүүн болон баруун */
}
p.guraw {
  border-style: solid;
  border-width: 35px 20px 2px 45px; /* 35px дээд, 20px баруун, 2px доод and 45px зүүн */
}
</style>

Үр дүнг харах

CSS Хүрээний өнгө /Border Color/

border-color шинж чанарт хүрээний өнгийг тодорхойлж өгдөг

Өнгөний төрлүүд:

name "red"
HEX - "#ff0000"
RGB - "rgb(255,0,0)"
HSL - "hsl(0, 100%, 50%)"
transparent

Тэмдэглэл: Хэрэв хүрээний өнгийг зааж өгөөгүй бол элементийн өнгийг өвлөн авах болно.

Жишээ нь

<style>
p.neg {
  border-style: solid;
  border-color: red;
  padding: 8px;
}
p.hoer {
  border-style: solid;
  border-color: green;
  padding: 8px;
} 
p.guraw {
  border-style: dotted;
  border-color: blue;
  padding: 8px;
} 
</style>

Үр дүнг харах

CSS Дөрвөн талын өнгө

border-color шинж чанарт дөрвөн талын хүрээний өнгийг өөр өөрөөр зааж өгч болно.

Жишээ нь

<style>
p.neg {
  border-style: solid;
  border-color: yellow green red blue; 
  padding: 30px;
}
</style>

Үр дүнг харах

CSS HEX утга

border-color шинж чанарт HEX буюу hexadecimal утга ашиглан өнгө зааж өгч болно.

Жишээ нь

<style>
p.neg {
  border-style: solid;
  border-color: #ff0000; 
  padding: 30px;
}
p.hoer {
  border-style: solid;
  border-color: #00ff00; 
  padding: 30px;
}
p.guraw {
  border-style: solid;
  border-color: #0000ff; 
  padding: 30px;
}
</style>

Үр дүнг харах

CSS RGB утга

border-color шинж чанарт RGB утга ашиглан өнгө зааж өгч болно.

Жишээ нь

<style>
p.neg {
  border-style: solid;
  border-color: rgb(255, 0, 0); 
  padding: 30px;
}
p.hoer {
  border-style: solid;
  border-color: rgb(0, 255, 0); 
  padding: 30px;
}
p.guraw {
  border-style: solid;
  border-color: rgb(0, 0, 255); 
  padding: 30px;
}
</style>

Үр дүнг харах

CSS HSL утга

border-color шинж чанарт HSL утга ашиглан өнгө зааж өгч болно.

Жишээ нь

<style>
p.neg {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); 
  padding: 30px;
}
p.hoer {
  border-style: solid;
  border-color: hsl(122, 72%, 54%); 
  padding: 30px;
}
p.guraw {
  border-style: solid;
  border-color: hsl(240, 100%, 50%); 
  padding: 30px;
}
</style>

Үр дүнг харах

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

CSS-д хүрээний талуудыг тус бүрээр нь зааж өгөх шинж чанар байдаг. (top, right, botoom, left)

Жишээ нь

<style>
p {
  border-top-style: dotted;
  border-right-style: dashed;
  border-bottom-style: double;
  border-left-style: solid;
  padding: 30px;
}
</style>

Үр дүнг харах

Хүрээний хоёр тал нь адил байх тохиолдолд товч бичиглэл ашиглаж болно

Жишээ нь

<style>
p {
  border-style: dotted double;
  padding: 30px;
}
</style>

Үр дүнг харах

CSS Богино бичиглэл /Shorthand/

Кодын бичиглэлийг багасгахын тулд өмчлөгч буюу border-т шинж чанаруудыг нэг мөрөнд зааж өгнө.

Жишээ нь

<style>
p {
  border: 5px solid red;  
}
</style>

Үр дүнг харах

Border-left

<style>
p {
  border-left: 5px solid red;
  background-color: #CCCCCC; 
  padding: 10px; 
}
</style>

Үр дүнг харах

Border-bottom

<style>
p {
  border-bottom: 5px solid red;
  background-color: #CCCCCC; 
  padding: 10px; 
}
</style>

Үр дүнг харах

CSS Хүрээний радиус /Rounded Borders/

border-radius шинж чанарт хүрээний буланг дугуй хэлбэртэй болгох утгыг зааж өгнө.

Жишээ нь

<style>
p {
  border: 5px solid red;
  border-radius: 10px;
  padding: 10px;
}
</style>

Үр дүнг харах

Сэтгэгдэлүүд

	Контентын нэр
	CSS Бичиглэл /Syntax/
	CSS Сонгогч /Selector/
	CSS-г HTML-д хэрхэн нэмэх вэ?
	CSS Тайлбар /Comments/
	CSS Өнгө /Color/
	CSS Дэвсгэр /Backgrounds/
	CSS Хүрээ /Border/
	CSS Margins
	CSS Padding
	CSS Өндөр ба Өргөн
	CSS Box модель /Box Model/
	CSS Outline
	CSS Текст /Text/
	CSS Үсгийн Фонт /Font/
	CSS Дүрс, Тэмдэг /Icon/
	CSS Холбоос /Links/
	CSS Жагсаалт /List/
	CSS Хүснэгт /Table/
	CSS Dispaly шинж чанар
	CSS Байрлал /Position/
	CSS Халих /Owerflow/
	CSS Float ба Clear
	CSS Inline-block
	CSS Зэрэгцүүлэлт /Align/
	CSS Combinators
	Pseudo-class selectors
	CSS Pseudo-элемент сонгогч
	CSS Opacity
	CSS Navigation Bar
	CSS Атрибут сонгогч