Оценка на читателите: / 26
Слаба статияОтлична статия 

CSS рамки

CSS border командите дават възможност да се определи изгледа на рамката: вид, цвят и дебелина.

Вид на рамка

Командата за вид на рамка се задава с border-style и може да приема следните стойности:

  • none: без рамка
  • dotted: рамка, изградена от точки
  • dashed: рамка - прекъсната линия
  • solid: рамка с една плътна линия
  • double: рамка с две плътни линии
  • groove: триизмерна вдлъбната рамка
  • ridge: триизмерна изпъкнала рамка
  • inset: триизмерна обърната навътре рамка
  • outset: триизмерна обърната навън рамка

Вижте пример

Дебелина на рамка

Свойството дебелина на рамка се задава с border-width, а за стойност може да се използват както числа (в пиксели), така и една от следните думи: thin, medium, thick, които браузърът ще интерпретира автоматично, за да създаде съответно тясна, нормална или дебела рамка. Обърнете внимание, че border-width ще бъде ефективно приложено само ако вече е указан вида на рамката (border-style). Опитай сам

Цвят на рамка

За задаване на цвят на рамка се използва border-color. Аналогично на цвета на текста, самите стойности за цвят на рамка може да бъдат:

  • валидно име на цвят, напр. olive за маслено зелено;
  • RGB стойност, напр. rgb(0,255,0)
  • HEX стойност, напр. #00FF00

Указанието за цвят на рамка ще бъде валидно само ако вече е указан вид на рамката (border-style). Опитай сам

Индивидуални стилове за отделните страни на рамката

Можете да укажете различен вид на рамка за всяка от четирите страни, използвайки следните думи:

  • border-top-style (горна рамка)
  • border-right-style (дясна рамка)
  • border-bottom-style (долна рамка)
  • border-left-style (лява рамка)

Аналогично се задават и стойности за цвят и дебелина на отделните страни: заместете style съответно с color или width (напр. border-top-color задава цвят за горната рамка). Опитай сам

Стил на рамка: съкратен запис

Всички свойства на рамката може да бъдат указани по съкратен начин, използвайки думата border:

border: 3px dotted orange;

Редът на стойностите е дебелина, вид, цвят, но с изключение на задължителната стойност за вид на рамка не е необходимо всички стойности да бъдат задавани (ако някоя стойност бъде изпусната, браузърът ще използва стойността по подразбиране). Опитай сам

 

Ако решите, че "как се прави сайт" ръководството може да бъде полезно и за други хора, моля гласувайте за сайта:

+добави в любими.ком Елате в .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт!!!

Ако желаете да оставите коментар към статията, трябва да се регистрирате.