Границя CSS є ключовою властивістю, яка використовується для характеристики та стилізації рамок навколо компонентів HTML. Межі відіграють важливу роль у композиції веб-сайту, допомагаючи розмежувати, підкреслити та створити стильну привабливість. У CSS ви можете використовувати кілька властивостей, пов’язаних із межами, щоб керувати стилем, різноманітністю, розміром і формою цих меж. У цій статті ми досліджуватимемо ці властивості меж CSS і як їх реально використовувати.
Властивості меж CSS
Властивості кордону CSS використовуються для визначення стилю, різноманітності, ширини та відпливу та відпливу кордонів компонента. Ці властивості включають:
приклади nfa
- бордюрний стиль
- колір кордону
- border-width
- кордон-радіус
1) Стиль рамки CSS
Властивість Стиль межі використовується для визначення типу межі, яку ви бажаєте відобразити на веб-сторінці.
Існують деякі значення стилю межі, які використовуються з властивістю border-style для визначення рамки.
| Значення | опис |
|---|---|
| немає | Це не визначає жодної межі. |
| пунктирний | Він використовується для визначення пунктирної межі. |
| штриховий | Він використовується для визначення пунктирної межі. |
| твердий | Він використовується для визначення суцільної межі. |
| подвійний | Він визначає дві рамки з однаковим значенням ширини рамки. |
| паз | Він визначає тривимірну рифлену межу. ефект генерується відповідно до значення кольору рамки. |
| хребет | Він визначає тривимірну ребристу межу. ефект генерується відповідно до значення кольору рамки. |
| вставка | Він визначає рамку 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 Вихід:
Ігри imessage на андроїд
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 border-color
Є три стратегії встановлення кольору рамки.
- Назва: визначає назву кольору. Наприклад: 'червоний'.
- RGB: визначає значення RGB кольору. Наприклад: 'rgb(255,0,0)'.
- Шістнадцятковий: Визначає шістнадцяткове значення кольору. Наприклад: '#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 Вихід:
