Határ - CSS-trükkök

A bordertulajdonság egy rövidített szintaxis a CSS-ben, amely több értéket is elfogad egy vonal rajzolásához az elem köré.

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

Értékek

A borderszálláshely az alábbi értékek közül egyet vagy többet elfogad együttesen:

border: || || 

• border-width: Megadja a szegély vastagságát.
  • : Egy numerikus értéket mért px, em, rem, vhés vwegységek.
  • thin: A megfelelője 1px
  • medium: A megfelelője 3px
  • thick: A megfelelője 5px
• border-style: Megadja az elem köré rajzolt vonal típusát, beleértve:
  • solid: Folyamatos, folytonos vonal.
  • none (alapértelmezett): Nincs vonal húzva.
  • hidden: Vonal húzódik, de nem látható. ez hasznos lehet egy kis extra szélesség hozzáadásához egy elemhez anélkül, hogy szegélyt kellene megjeleníteni.
  • dashed: Vonal, amely kötőjelekből áll.
  • dotted: Pontokból álló vonal.
  • double: Az elem körül két vonal húzódik.
  • groove: Hozzáad egy ferde színérték alapján oly módon, hogy az elem benyomva jelenik meg a dokumentumban.
  • ridge: Hasonló groove, de megfordítja a színértékeket oly módon, hogy az elem emelkedettnek tűnjön.
  • inset: Osztott hangot ad a sorhoz, amely az elemet kissé nyomottá teszi.
  • outset: Hasonló inset, de megfordítja a színeket oly módon, hogy az elem kissé felemeltnek tűnik.
• color: Megadja a szegély színét és elfogadja ,, , , , , 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.

Króm	Szafari	Firefox	Opera	AZAZ	Android	iOS
Bármi	Bármi	Bármi	3,5+	4+	Bármi	Bármi

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.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####