Кордон - CSS-хитрощі

Anonim

borderВластивість є узагальнюючим синтаксис CSS , який приймає кілька значень для малювання лінії навколо елемента він застосовується.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Цінності

borderВластивість приймає одне або більше з таких значень в комбінації:

border: || ||
  • border-width: Вказує товщину кордону.
    • : Числове значення , виміряне в px, em, rem, vhі vwодиниці.
    • thin: Еквівалент 1px
    • medium: Еквівалент 3px
    • thick: Еквівалент 5px
  • border-style: Вказує тип лінії, проведеної навколо елемента, включаючи:
    • solid: Суцільна, безперервна лінія.
    • none (за замовчуванням): Лінія не намальована.
    • hidden: Накреслена лінія, але її не видно. це може бути корисним для додавання трохи додаткової ширини елементу без відображення межі.
    • dashed: Рядок, який складається з тире.
    • dotted: Рядок, що складається з крапок.
    • double: Навколо елемента намальовано дві лінії.
    • groove: Додає скос на основі значення кольору таким чином, щоб елемент здавався притиснутим до документа.
    • ridge: Подібно до groove, але змінює значення кольору таким чином, щоб елемент здавався піднятим.
    • inset: Додає роздільний тон до рядка, через який елемент здається злегка пригніченим.
    • outset: Подібно до inset, але змінює кольори таким чином, що елемент здається злегка піднятим.
  • color: Визначає колір межі та приймає ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який Будь-який Будь-який 3,5+ 4+ Будь-який Будь-який

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.