HTML je jazyk používaný na poskytovanie štruktúry webových stránok a CSS nám umožňuje aplikovať štýly na prvky. Na webovej stránke sú nastavené rôzne hodnoty vlastností na použitie rôznych štýlov, ako napríklad farba pozadia, veľkosť písma, okraj, polomer okraja a tieňovanie rámčeka.

Tento blog bude diskutovať o metóde aplikácie tieňových efektov na prvky HTML.

Ako vrhnúť tieňový efekt na prvky HTML pomocou CSS?

' box-shadow ” vlastnosť pridáva tieň okolo prvku, kde je možné oddeliť dve alebo viac pridaných hodnôt efektu čiarkami.

Syntax vlastnosti box-shadow je opísaná nižšie.

Syntax

box-shadow : žiadny |h-offset v-offset rozostrenie rozprestretej farby | vložka | počiatočné | dedíš ;

Popis vyššie uvedenej syntaxe je uvedený nižšie:

“ žiadny ”: Je to predvolená hodnota vlastnosti box-shadow.
“ h-offset “: Táto hodnota predstavuje horizontálnu vzdialenosť.
“ v-offset ”: Táto hodnota definuje vertikálnu vzdialenosť.
“ rozmazať “: Tretia hodnota je rozmazanie. Maximalizáciou jeho hodnoty sa maximalizuje efekt rozmazania.
“ šírenie ”: Štvrtá hodnota predstavuje rozpätie tieňov. Môže mať kladné alebo záporné hodnoty, pričom kladná hodnota spread zvyšuje a záporná hodnota ho znižuje.
“ farba “: Táto hodnota je voliteľná a predstavuje aktuálnu farbu.
“ počiatočné ”: Táto hodnota nastavuje vlastnosť svojej počiatočnej hodnoty.
“ dedíš ”: Táto hodnota zdedí vlastnosť svojho nadradeného prvku.
“ vložka ”: Vložená hodnota sa používa na vytvorenie tieňov vo vnútri rámčeka.

Pozrime sa, ako vyzerá efekt tieňa na praktickom príklade.

Príklad

Do súboru HTML najskôr pridajte znak „

“. Do tohto prvku

pridajte značky

a
, aby ste poskytli obsah webovej stránke.

HTML

< div >

< h1 > Box Shadow < / h1 >

< p > box-shadow: 3px 8px < / p >

< / div >

Teraz použite vlastnosti CSS na pridané prvky HTML.

CSS

div {

box-shadow : 3px 8px ;

}

Prvok div sa použije s vlastnosťou „ box-shadow “ s hodnotou “ 3px 8px “, čo predstavuje horizontálny posun a vertikálny posun.

Výkon

V ďalšej časti budú mať prvky HTML štýl s rôznymi vlastnosťami.

CSS

div {

hranica : 5 pixelov pevný rgb ( 255 , 111 , 1 ) ;

box-shadow : 3px 8px 9 pixelov 4px #f4af1b ;

}

Nasledujú ďalšie vlastnosti CSS použité na prvok div:

“ hranica Vlastnosti ” je priradená hodnota 5px solid rgb(255, 111,1), kde 5px označuje šírku orámovania, solid predstavuje štýl orámovania a rgb(255, 111, 1) je farba.
“ box-shadow ” vlastnosť s hodnotou 3px 8px 9px 4px #f4af1b predstavuje h-offset ako 3px, v-offset ako 8px, rozmazanie ako 9px, spread ako 4px a #f4af1b určuje farbu.

Vyššie uvedený kód zobrazí prvok div, ako je uvedené nižšie:

Teraz v ďalšej časti vytvorte dva boxy predstavujúce dva prvky div. Každému dáme rôzne viacnásobné hodnoty box-shadow a pozorujeme výsledky.

HTML

= 'box1' >

> Box Shadow >

> box-shadow : 3px 8px 9 pixelov 4px #f4af1b >

> > >

= 'box2' >

> Box Shadow >

> box-shadow : 3px 8px 9 pixelov 4px #f4af1b >

>

Štýl box1 div

#box1 {

šírka : 40 % ;

výška : 140 pixelov ;

hranica : 5 pixelov pevný #ff9c83 ;

box-shadow : 8px 10 pixelov 15 pixelov 20 pixelov #807f7f ;

}

Tu:

“ #box1 ” sa používa na prístup k div s id box1.
“ šírka vlastnosť sa používa na nastavenie šírky prvku.
“ výška vlastnosť nastavuje výšku prvku.
“ hranica ” má hodnotu 5px solid #ff9c83 kde 5px označuje šírku orámovania, solid predstavuje štýl orámovania a #ff9c83 je farba.
“ box-shadow ” vlastnosť bude nastavená ako “ 8px 10px 15px 20px #807f7f kde 8px je horizontálny posun, 10px je vertikálny posun, 15px je efekt rozmazania, 20px je efekt roztiahnutia a #807f7f je farba tieňa.

Štýl box2 div

#box2 {

šírka : 40 % ;

výška : 140 pixelov ;

hranica : 5 pixelov pevný rgb ( 255 , 111 , 1 ) ;

box-shadow : vložka 4px 8px #f4af1b ;

ľavý okraj : 350 pixelov ;

}

Je možné pozorovať, že sme naštylizovali div box2 s rovnakými vlastnosťami:

Bonusový tip: Pridanie viacerých tieňov do prvku HTML

' box-shadow Vlastnosť ” možno použiť na pridanie viacerých efektov tieňa do prvku HTML. Môžete to urobiť pomocou čiarok medzi každým tieňom, ako je znázornené v nasledujúcom príklade:

box-shadow : 6px 6px rgb ( 91 , 0 , 143 ) , 12 pixelov 5 pixelov rgb ( 201 , 8 , 8 ) , 16 pixelov 16 pixelov 8px rgb ( 226 , 213 , 29 ) ;

Ako vidíte, úspešne sa aplikovalo viacero tieňov:

To bolo všetko o použití tieňa ohraničenia CSS.

Záver

' box-shadow ” vlastnosť v CSS sa používa na aplikovanie tieňových efektov na prvky HTML. Táto vlastnosť sa skladá hlavne z dvoch hodnôt, ktoré sú určené pre horizontálne a vertikálne posunutie, ale môže existovať viacero hodnôt, napríklad pre efekt rozmazania, efekt rozprestretia, farbu a ďalšie. Okrem toho môžete k prvkom pridať aj viacero tieňov pomocou čiarok medzi každou vlastnosťou box-shadow. Tento článok vysvetľuje vlastnosť CSS box-shadow na praktických príkladoch.

tieň okraja CSS