CSS Контур
Спробуйте самі »
CSS Контур
Контур - це смуга, яка проводиться навколо елементів ПОЗА МЕЖАМИ, щоб зробити елемент "виокремленим".
CSS має наступні властивості контуру:
-
outline-style -
outline-color -
outline-width -
outline-offset -
outline
Примітка: Контур відрізняється від меж! На відміну від межі, контур малюється поза межею елементу і може перекривати інший зміст. Крім того, контур НЕ є частиною розмірів елементу; загальна ширина та висота елемента не залежить від ширини контуру.
CSS Стиль контуру
Властивість outline-style визначає стиль контуру і може мати одне з наступних значень:
dotted- Визначає цятковий контурdashed- Визначає пунктирний контурsolid- Визначає суцільний контурdouble- Визначає подвійний контурgroove- Визначає 3D рифлений контурridge- Визначає 3D ребристий контурinset- Визначає 3D внутрішній контурoutset- Визначає 3D зовнішній контурnone- Визначає відсутність контуруhidden- Визначає прихований контур
В наступному прикладі показані різні значення outline-style:
Приклад
Демонстрація різних стилей контуру:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Результат:
Цятковий контур.
Пунктирний контур.
Суцільний контур.
Подвійний контур.
Рифлений контур. Ефект залежить від значення кольору контуру.
Ребристий контур. Ефект залежить від значення кольору контуру.
Внутрішній контур. Ефект залежить від значення кольору контуру.
Зовнішній контур. Ефект залежить від значення кольору контуру.
Примітка: Жодне з інших властивостей контуру (про які ви дізнаєтесь більше в наступних розділах нашого сайту W3Schools українською) не буде мати БУДЬ-ЯКОГО ефекту, якщо не встановлено властивість outline-style!
