Siena - CSS-gudrybės

Turinys

borderNuosavybė yra sutrumpinimas sintaksė CSS, kuri priima kelis vertės piešimo liniją aplink elemento ji taikoma.

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

Vertybės

borderNuosavybė priima vieną arba daugiau iš šių verčių derinys:

border: || ||
  • border-width: Nurodo krašto storį.
    • : Skaitinė vertė matuojama px, em, rem, vhir vwvienetų.
    • thin: Atitikmuo 1px
    • medium: Atitikmuo 3px
    • thick: Atitikmuo 5px
  • border-style: Nurodo aplink elementą nubrėžtos linijos tipą, įskaitant:
    • solid: Vientisa, ištisinė linija.
    • none (numatytasis): linija nenubrėžta.
    • hidden: Linija nubrėžta, bet nematoma. tai gali būti patogu pridedant šiek tiek papildomo pločio elementui, nerodant krašto.
    • dashed: Linija, susidedanti iš brūkšnių.
    • dotted: Linija, susidedanti iš taškų.
    • double: Aplink elementą nubrėžtos dvi linijos.
    • groove: Prideda kampą pagal spalvos vertę taip, kad elementas pasirodytų prispaustas dokumente.
    • ridge: Panašus į groove, bet pakeičia spalvų vertes taip, kad elementas atrodytų pakeltas.
    • inset: Prie eilutės pridedamas padalintas tonas, dėl kurio elementas atrodo šiek tiek nuspaustas.
    • outset: Panašus į inset, bet pakeičia spalvas taip, kad elementas atrodytų šiek tiek pakeltas.
  • color: Nurodo krašto spalvą ir priima ,, , , , , 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 T.Y „Android“ „iOS“
Bet koks Bet koks Bet koks 3,5 ir daugiau 4+ Bet koks Bet koks

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.