CSS границата е ключово свойство, използвано за характеризиране и стилизиране на границите около HTML компонентите. Границите заемат жизненоважна част от композицията на уебсайта, като помагат за разделяне, подчертаване и стилна привлекателност. В CSS можете да използвате няколко свойства, свързани с границите, за да контролирате стила, разнообразието, размера и формата на тези граници. В тази статия ще проучим тези свойства на границите на CSS и как наистина да ги използваме.
CSS свойства на границите
CSS свойствата на границите се използват за определяне на стила, разнообразието, ширината и приливите и отливите на границите на компонент. Тези свойства включват:
викас дивякирти
- граничен стил
- цвят на границата
- border-width
- граница-радиус
1) CSS стил на рамка
Свойството Border style се използва за указване на типа граница, която искате да се покаже на уеб страницата.
Има някои стойности на стил на граница, които се използват със свойството border-style за дефиниране на граница.
| Стойност | Описание |
|---|---|
| нито един | Не определя никаква граница. |
| пунктиран | Използва се за дефиниране на пунктирана граница. |
| пунктирана | Използва се за дефиниране на пунктирана граница. |
| твърдо | Използва се за определяне на плътна граница. |
| двойно | Той дефинира две граници с една и съща стойност на ширина на границата. |
| бразда | Той определя 3D набраздена граница. ефектът се генерира според стойността на цвета на рамката. |
| хребет | Определя 3D набраздена граница. ефектът се генерира според стойността на цвета на рамката. |
| вмъкване | Той определя 3d вмъкната граница. ефектът се генерира според стойността на цвета на рамката. |
| начало | Той определя 3d начална граница. ефектът се генерира според стойността на цвета на рамката. |
Пример:
.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 Изход:
100 км/ч до мили/ч
2) CSS border-width
Свойството border-width се използва за задаване на ширината на границата. Задава се в пиксели. Можете също да използвате една от трите предварително зададени стойности, тънка, средна или дебела, за да зададете ширината на границата.
Забележка: Свойството border-width не се използва самостоятелно. Постоянно се използва с други свойства на границата, като свойството 'border-style', за да зададе границата първа по друг начин, по който няма да работи.
/* 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) CSS цвят на границата
Има три стратегии за задаване на цвета на рамката.
- Име: Определя името на цвета. Например: „червено“.
- RGB: Определя RGB стойността на цвета. Например: „rgb(255,0,0)“.
- Hex: Определя шестнадесетичната стойност на цвета. Например: '#ff0000'.
Забележка: Свойството border-color не се използва самостоятелно. Постоянно се използва с други свойства на границата, като свойството 'border-style', за да зададе границата първа по друг начин, по който няма да работи.
Пример:
.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 Изход:
