CSS Рамките (border) ви позволяват да определите и стилизирате границите на даден HTML елемент.
Border Style
Пропъртито border-style определя какъв вид рамка ще използвате за конкретния елемент. Забележка: Нито едно от пропъртитата за рамки няма да работят, ако border-style не е дефиниран! Border-Style Стойности:
- none: Елемента няма рамка
- dotted: Определя пунктирана рамка
- dashed: Рамка съставена от тирета
- solid: Дефинира плътна рамка
- double: Дефинира двойна рамка.
- groove: Дефинира 3D grooved рамка, като ефекта зависи от това какви цветове са избрани.
- ridge: Дефинира 3D ridge рамка, като ефекта отново зависи от избраните цветове.
- inset: Дефинира 3D рамка, като ефекта отново зависи от избраните цветове
- outset: Дефинира 3D ridge рамка, като ефекта отново зависи от избраните цветове
Разликата между 3D рамките е в ефекта, който се получава. Опитайте сами: Определете стила на рамката
Border-Width
Това пропърти задава дебелината на рамката. За ширината се използва или една от предварителните стойност (тънка, средна, дебела) или се означава с пиксели. Забележка: border-width не работи ако стила на рамката не е определен преди това.
Border-Color
Пропъртито се използва за задаване на цвят на рамката. Цвета се определя по 3 начина:
- име на цвят – „red“
- RGB стойност – като „RGB (255,0,0)“
- Hex – шестнадесетична стойнсот, като „# ff0000“
Може да направите рамката прозрачна (transparent). Забележка: Както и за дебелината, border-color няма да работи, освен ако не сте избрали стила на рамката преди това.
Border – Индивидуално Стилизиране на Страните
В CSS е възможно отделно да стилизираме различните страни на една и съща рамка. Можем да приложим различни стилове, различна дебелина и цвят:
Примера по-горе може да се направи само с едно пропърти:
Пропъртито border-style може да има от една до четири стойности.
- border-style: dotted solid double dashed;
- горната рамка е dotted
- дясната рамка е solid
- долната рамка е double
- лявата рамка се dashed
- border-style: dotted solid double;
- горната рамка е dotted
- наляво и надясно рамките са solid
- долната рамка е double
- border-style: dotted solid;
- горни и долни рамки са dotted
- наляво и надясно рамки са solid
- border-style: dotted;
- всички четири рамки са dotted
По същия начин може да използвате пропърти за определяне на цвят и дебелина.
Border – Shorthand пропърти
Както прочетохте вече, много неща трябва да се вземат предвид при стилизирането на рамки. Може да използваме съкратено пропърти и да определим всички стилове наведнъж. По този начин се избягва повтаряемост и кода изглежда по-приличен. Пропъртито border е съкратен вариант на останалите:
- border-width
- border-style (ЗАДЪЛЖИТЕЛНО)
- border-color
Всички пропъртита за горната рамка в една декларация Този пример показва, как чрез съкратено пропърти можем да дефинираме всички стилове на горната рамка.
Определя стила на долната рамка Този пример показва как да стилизираме долната рамка.
Задава ширината на лявата рамка Този пример показва как да зададем ширина на лявата страна на рамката.
Дефиниране на цвят на четирите рамки Този пример показва как да настроите цвета на четирите страни на рамката.
Задайте цвета на дясната рамка Този пример показва как да зададете цвят на дясната рамка.
Всички CSS пропъртита за рамки
Пропърти | Описание |
---|---|
border | Задава всички border пропъртита в една декларация |
border-bottom | Задава всички пропъртита на долната част на рамката с една декларация |
border-bottom-color | Задава цвят на долната рамка |
border-bottom-style | Определя стила на долната рамка |
border-bottom-width | Задава ширина на долната рамка |
border-color | Задава цвят на цялата рамка |
border-left | Всички пропъртита на лявата рамка в една декларация |
border-left-color | Как се задава цвят на лявата рамка |
border-left-style | Задаване на стилове на лявата рамка |
border-left-width | Ширина на дясната част на рамката |
border-right | Декларация със всички рамкови пропъртита наведнъж |
border-right-color | Задаване на цвят на дясната рамка |
border-right-style | Стилизиране на дясната рамка |
border-right-width | Задаване на ширина на дясната рамка |
border-style | Задаване на стил на рамката |
border-top | Всички декларации за горната част в едно пропърти |
border-top-color | Задава цвета на горната рамка |
border-top-style | Задава стиловете на горната рамка |
border-top-width | Задава ширината на горната рамка |
border-width | Деклариране на ширина на четирите рамки |