logo

Kako dodati obrobo v CSS?

The meja je skrajšana lastnost v CSS, ki se uporablja za dodajanje obrobe elementu. Omogoča nam, da določimo obrobo polja. Nastavi širino, slog in barvo obrobe. Ta lastnost CSS vključuje naslednje lastnosti obrobe:

    širina roba:Lastnost border-width se uporablja za nastavitev širine obrobe. Uporabimo lahko tudi vnaprej določene vrednosti, ki so tanek, srednji, in debela za nastavitev širine obrobe. Določa debelino obrobe. Njegova privzeta vrednost je srednje .
    Te lastnosti ni mogoče uporabiti samostojno. Vedno se uporablja z drugimi lastnostmi meje, kot je lastnost 'border-style', da se najprej nastavi meja; sicer ne bo delovalo.
    Širina obrobe je lahko različna za vsako posamezno stran. To lahko storite z uporabo robne širine spodaj, border-top-width, border-desno-width , in border-left-width .slog obrobe:Ta lastnost določa slog obrobe. Določa, ali je obroba polna, pikčasta, črtkana, dvojna, utor in ena od drugih možnih vrednosti. Brez nastavitve te lastnosti, tj. brez nastavitve sloga obrobe, ne bo delovala nobena od drugih lastnosti obrobe. Obroba bo nevidna, ne da bi določili mejni slog . To je zato, ker je privzeta vrednost te lastnosti CSS nič .
    Podoben border-width , je lahko stil obrobe različen za vsako posamezno stran. To je mogoče storiti z uporabo lastnosti slog obrobe spodaj, slog obrobe zgoraj, slog obrobe desno , in mejno-levi slog .barva obrobe:Omogoča nam spreminjanje barve obrobe. Barvo lahko nastavimo z uporabo imena barve, vrednosti RGB ali hex vrednosti. Podobno kot pri border-width in mejni slog , lahko spremenimo barvo obrobe posamično, tj. spremenimo lahko barvo spodnje, zgornje, leve in desne strani obrobe elementa. To je mogoče storiti z uporabo lastnosti barva-spodnje-obrobe, barva-zgornje-obrobe, barva-desne-obrobe , in barva-leve-obrobe .
    The barva obrobe lastnine ni mogoče uporabljati samostojno. Za nastavitev meje ga je treba uporabiti z drugimi lastnostmi obrobe, kot je lastnost 'border-style'; sicer ne bo delovalo.

obroba proti obrisu

Čeprav so si meje in obrisi zelo podobni, obstaja nekaj razlik med obrisi in obrobami, ki so naslednje:

  • Z uporabo orisa ne moremo uporabiti različne širine obrisa, sloga in barve za štiri strani elementa, medtem ko lahko v obrobi uporabimo navedeno vrednost za vse štiri strani elementa.
  • Obroba je del dimenzije elementa, obris pa ni del dimenzije elementa. Pomeni, ne glede na to, kako debel obris nanesemo na element, se njegove dimenzije ne bodo spremenile.

Oglejmo si primer za razumevanje lastnosti meje.

Primer

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 
Preizkusite zdaj

Izhod

Kako dodati obrobo v CSS

Zdaj pa obstaja še en primer, v katerem uporabljamo oboje oris in meja lastnosti.

Primer

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 
Preizkusite zdaj

Izhod

Kako dodati obrobo v CSS