HTML on keel, mida kasutatakse veebilehtede struktuuri loomiseks ja CSS võimaldab meil elementidele stiile rakendada. Veebilehel seatakse erinevate stiilide rakendamiseks erinevad atribuutide väärtused, näiteks taustavärv, fondi suurus, ääris, äärise raadius ja kasti vari on üks neist.

Selles ajaveebis käsitletakse HTML-elementidele varjuefektide rakendamise meetodit.

Kuidas CSS-i abil varjuefekti HTML-elementidele avaldada?

' kast-vari ” atribuut lisab elemendi ümber varju, kus kaks või enam lisatud efekti väärtust saab eraldada komadega.

Kasti-varju omaduse süntaksit kirjeldatakse allpool.

Süntaks

kast-vari : mitte ühtegi |h-nihe v-nihe hägususe levivärv | sisend | esialgne | sa pärid ;

Ülalmainitud süntaksi kirjeldus on loetletud allpool:

“ mitte ühtegi ”: see on atribuudi box-shadow vaikeväärtus.
“ h-nihe ”: see väärtus tähistab horisontaalset kaugust.
“ v-nihe ”: see väärtus määrab vertikaalse kauguse.
“ hägusus ”: kolmas väärtus on hägusus. Selle väärtuse maksimeerimine suurendab hägususe efekti.
“ levik ”: neljas väärtus tähistab varjude levikut. See võib sisaldada positiivseid või negatiivseid väärtusi, kus positiivne väärtus suurendab hinnavahet ja negatiivne väärtus vähendab seda.
“ värvi ”: see väärtus on valikuline, esindab praegust värvi.
“ esialgne ”: see väärtus määrab selle algväärtuse atribuudi.
“ sa pärid ”: see väärtus pärib selle emaelemendi omaduse.
“ sisend ”: sisestusväärtust kasutatakse kasti sees varjude tegemiseks.

Vaatame praktilise näite kaudu, kuidas varjuefekt välja näeb.

Näide

Esmalt lisage HTML-faili '

”. Sellesse

elemendi sisse lisage veebilehele sisu andmiseks sildid

ja
.

HTML

< div >

< h1 > Kasti vari < / h1 >

< lk > kast-vari: 3px 8px < / lk >

< / div >

Nüüd rakendage lisatud HTML-elementidele CSS-i atribuute.

CSS

div {

kast-vari : 3 pikslit 8 pikslit ;

}

Div elementi rakendatakse atribuudiga ' kast-vari ' väärtusega ' 3px 8px ”, mis tähistab horisontaalset ja vertikaalset nihet.

Väljund

Järgmises jaotises kujundatakse HTML-i elemendid erinevate omadustega.

CSS

div {

piir : 5 pikslit tahke rgb ( 255 , 111 , 1 ) ;

kast-vari : 3 pikslit 8 pikslit 9 pikslit 4 pikslit #f4af1b ;

}

Div-elemendile rakendatud täiendavad CSS-i atribuudid on järgmised:

“ piir ” atribuudile omistatakse väärtus 5px solid rgb(255, 111,1), kus 5px tähistab äärise laiust, solid tähistab äärise stiili ja rgb(255, 111, 1) on värv.
“ kast-vari ” atribuut väärtusega 3px 8px 9px 4px #f4af1b esindab h-nihet 3px, v-nihet 8px, hägusust 9px, hajutamist 4px ja #f4af1b määrab värvi.

Ülaltoodud kood kuvab div elemendi, nagu allpool näidatud:

Nüüd looge järgmises jaotises kaks kasti, mis esindavad kahte div elementi. Anname igaühele erineva kastivarju väärtuse ja jälgime tulemusi.

HTML

= 'box1' >

> Kasti vari >

> kast-vari : 3 pikslit 8 pikslit 9 pikslit 4 pikslit #f4af1b >

> > >

= 'kast2' >

> Kasti vari >

> kast-vari : 3 pikslit 8 pikslit 9 pikslit 4 pikslit #f4af1b >

>

Style box1 divi

#kast1 {

laius : 40% ;

kõrgus : 140 pikslit ;

piir : 5 pikslit tahke #ff9c83 ;

kast-vari : 8 pikslit 10 pikslit 15 pikslit 20 pikslit #807f7f ;

}

Siin:

“ #kast1 ” kasutatakse div-le juurdepääsuks ID-kastiga1.
“ laius ” atribuuti kasutatakse elemendi laiuse määramiseks.
“ kõrgus ” atribuut määrab elemendi kõrguse.
“ piir ” on antud väärtus 5px solid #ff9c83, kus 5px tähistab äärise laiust, solid tähistab äärise stiili ja #ff9c83 on värvi.
“ kast-vari ' atribuut määratakse kui ' 8px 10px 15px 20px #807f7f ” kus 8px on horisontaalne nihe, 10px on vertikaalnihe, 15px on hägususe efekt, 20px on hajutamise efekt ja #807f7f on varju värv.

Style box2 div

#kast2 {

laius : 40% ;

kõrgus : 140 pikslit ;

piir : 5 pikslit tahke rgb ( 255 , 111 , 1 ) ;

kast-vari : sisend 4 pikslit 8 pikslit #f4af1b ;

margin-vasak : 350 pikslit ;

}

Võib täheldada, et oleme loonud box2 div samade omadustega:

Boonusnõuanne: HTML-i elemendile mitme varju lisamine

' kast-vari ” atribuuti saab kasutada mitme varjuefekti lisamiseks HTML-i elemendile. Seda saab teha, kasutades iga varju vahele komasid, nagu on näidatud allolevas näites:

kast-vari : 6 pikslit 6 pikslit rgb ( 91 , 0 , 143 ) , 12 pikslit 5 pikslit rgb ( 201 , 8 , 8 ) , 16 pikslit 16 pikslit 8 pikslit rgb ( 226 , 213 , 29 ) ;

Nagu näete, on mitu varju edukalt rakendatud:

See kõik puudutas CSS-i piirivarju kasutamist.

Järeldus

' kast-vari ” atribuuti CSS-is kasutatakse HTML-i elementidele varjuefektide rakendamiseks. See atribuut koosneb peamiselt kahest väärtusest, mis on mõeldud horisontaalse ja vertikaalse nihke jaoks, kuid väärtusi võib olla mitu, näiteks hägususe efekti, leviraadiuse efekti, värvi ja palju muud väärtust. Lisaks saate elementidele lisada ka mitu varju, kasutades iga kasti-varju atribuudi vahel komasid. Selles artiklis on selgitatud CSS-i kastivarju omadust praktiliste näidetega.

CSS-i ääriste vari