ЦСС граница је кључна особина која се користи за карактеризацију и стил ивица око ХТМЛ компоненти. Ивице заузимају витални део у композицији веб-сајта, помажући у стварању раздвајања, наглашавања и стилске привлачности. У ЦСС-у можете користити неколико својстава везаних за границе да бисте контролисали стил, разноликост, величину и облик ових ивица. У овом чланку ћемо истражити ова својства ЦСС граница и како их заиста искористити.
ЦСС Бордер Пропертиес
ЦСС својства граница се користе за одређивање стила, разноликости, ширине и осеке и тока граница компоненте. Ова својства укључују:
- у стилу границе
- боја ивице
- граница-ширина
- граница-радијус
1) ЦСС у стилу границе
Својство Бордер стиле се користи за одређивање типа ивице коју желите да прикажете на веб страници.
Постоје неке вредности стила ивице које се користе са својством бордер-стиле за дефинисање ивице.
| Валуе | Опис |
|---|---|
| ниједан | Не дефинише никакву границу. |
| тачкаста | Користи се за дефинисање тачкасте границе. |
| испрекидана | Користи се за дефинисање испрекидане границе. |
| чврст | Користи се за дефинисање чврсте границе. |
| дупло | Дефинише две границе са истом вредношћу ширине границе. |
| жлеб | Дефинише тродимензионалну границу. ефекат се генерише према вредности боје границе. |
| гребен | Дефинише тродимензионалну границу. ефекат се генерише према вредности боје границе. |
| уметнути | Дефинише 3Д уметнуту границу. ефекат се генерише према вредности боје границе. |
| почетак | Дефинише 3Д почетну границу. ефекат се генерише према вредности боје границе. |
Пример:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Излаз:
2) ЦСС граница ширине
Својство бордер-видтх се користи за подешавање ширине ивице. Поставља се у пикселима. Такође можете користити једну од три унапред дефинисане вредности, танку, средњу или дебелу да подесите ширину ивице.
Напомена: Својство ширине границе се не користи само. Стално се користи са другим својствима ивице као што је својство 'бордер-стиле' да би се прва поставила граница на било који други начин на који неће функционисати.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Излаз:
3) ЦСС боја ивице
Постоје три стратегије за постављање боје границе.
- Име: Одређује назив боје. На пример: 'црвено'.
- РГБ: Одређује РГБ вредност боје. На пример: 'ргб(255,0,0)'.
- Хек: Одређује хексадецималну вредност боје. На пример: '#фф0000'.
Напомена: Својство боје границе се не користи само. Стално се користи са другим својствима ивице као што је својство 'бордер-стиле' да би се прва поставила граница на било који други начин на који неће функционисати.
Пример:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Излаз:
