CSS-de çägeler bilen işlemegiň esaslary

Häzir biz elementlere çäge goşmagy öwreris. Bu üç hossadan ýardam edilip ýerine ýetirilýär: border-width hossasy çägeniň galyňlygyny, border-color - reňkini, border-style hossasy bolsa çägeniň görnüşini bellar.

Ilkinji iki hossa açyk-aýdan işleýär: border-color hossasy, color hossasy bilen deň formatdaky reňkleri kabul edýär, çägeniň galyňlygy bolsa pikselde bellenýär. border-style hossasy bolsa açar sözler görnüşindäki bahalary kabul edýär. Meselem, solid bahasy ýalpyldawyk çyzygy bellar.

Geliň, meselem, 3 piksel galyňlygynda, ýalpyldawyk çyzyk görnüşinde, gyzyl reňkli çäge dözedeliň:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* 3px galyňlyk */
  border-style: solid;  /* çyzyk görnüşinde */
  border-color: red;    /* gyzyl reňk */
  width: 300px;
  height: 100px;
}

Результат:

Indiki sapaklarda biz çägeler bilen işlemegi has giňişleýin gözden geçireris.