CSS Колір контуру
CSS Колір контуру
Властивість outline-color використовується для встановлення кольору контуру.
Колір може бути встановлено за допомогою:
- name - вкажіть назву кольору, наприклад "red"
- HEX - вкажіть шістнадцяткове значення, наприклад "#ff0000"
- RGB - вкажіть значення RGB, наприклад "rgb(255,0,0)"
- HSL - вкажіть значення HSL, наприклад 'hsl(0, 100%, 50%)'
- invert - виконує інверсію кольору (що забезпечує видимість контуру незалежно від кольорового фону)
В наступному прикладі показані кілька різних контурів з різними кольорами. Також зверніть увагу, що ці елементи також мають тонку чорну рамку всередині контуру:
Суцільний червоний контур.
Цятковий синій контур.
Зовнішній сірий контур.
Приклад
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
Спробуйте самі »
HEX Значення
Колір контуру також можна вказати за допомогою шістнадцяткового значення (HEX):
RGB Значення
Або використовуючи значення RGB:
Приклад
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* червоний */
}
Спробуйте самі »
HSL Значення
Ви також можете використовувати значення HSL:
Приклад
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* червоний */
}
Спробуйте самі »
Ви можете дізнатись більше про значення HEX, RGB та HSL в розділах CSS Кольори на нашому сайті W3Schools українською.
Інвертувати колір
В наступному прикладі використовується outline-color: invert, який виконує інверсію кольору. Це гарантує, що контур буде видно незалежно від кольору фону:
Суцільний інвертований контур.
Приклад
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
Спробуйте самі »
