Hranice - Triky CSS

Anonim

Tato bordervlastnost je zkratkovou syntaxí v CSS, která přijímá více hodnot pro kreslení čáry kolem prvku, na který je použita.

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

Hodnoty

borderVlastnost přijímá jeden nebo více z následujících hodnot v kombinaci:

border: || ||
  • border-width: Určuje tloušťku ohraničení.
    • : Číselná hodnota měřená v px, em, rem, vha vwjednotek.
    • thin: Ekvivalent 1px
    • medium: Ekvivalent 3px
    • thick: Ekvivalent 5px
  • border-style: Určuje typ čáry nakreslené kolem prvku, včetně:
    • solid: Plná souvislá čára.
    • none (výchozí): Není nakreslena žádná čára.
    • hidden: Čára je nakreslena, ale není viditelná. to může být užitečné pro přidání trochu další šířky k prvku bez zobrazení ohraničení.
    • dashed: Řádek, který se skládá z pomlček.
    • dotted: Řádek, který se skládá z teček.
    • double: Kolem prvku jsou nakresleny dvě čáry.
    • groove: Přidá zkosení na základě hodnoty barvy způsobem, díky kterému se prvek zobrazí vtlačený do dokumentu.
    • ridge: Podobné jako groove, ale obrátí hodnoty barev způsobem, který způsobí, že se prvek objeví zvýšený.
    • inset: Přidá dělený tón do řádku, díky kterému bude prvek vypadat mírně stlačený.
    • outset: Podobně jako inset, ale obrátí barvy způsobem, který způsobí, že prvek vypadá mírně zvednutý.
  • color: Určuje barvu ohraničení a přijímá ,, , , , , 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 Safari Firefox Opera TJ Android iOS
Žádný Žádný Žádný 3,5+ 4+ Žádný Žádný

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.