HTML ir valoda, ko izmanto, lai nodrošinātu tīmekļa lapu struktūru, un CSS ļauj elementiem piemērot stilus. Tīmekļa lapā ir iestatītas dažādas rekvizītu vērtības, lai lietotu dažādus stilus, piemēram, fona krāsa, fonta izmērs, apmale, apmales rādiuss un lodziņa ēna ir viens no tiem.

Šajā emuārā tiks apspriesta metode, kā HTML elementiem piemērot ēnu efektus.

Kā nomest ēnu efektu uz HTML elementiem, izmantojot CSS?

' kaste-ēna ” rekvizīts pievieno ēnu ap elementu, kur divas vai vairākas pievienoto efektu vērtības var atdalīt ar komatiem.

Rekvizīta box-shadow sintakse ir aprakstīta tālāk.

Sintakse

kaste-ēna : neviens |h-nobīde v-nobīde izplūduma izplatības krāsa | ielaidums | sākotnējā | mantot ;

Iepriekš minētās sintakses apraksts ir norādīts zemāk:

' neviens ”: tā ir rekvizīta box-shadow noklusējuma vērtība.
' h-nobīde ”: šī vērtība apzīmē horizontālo attālumu.
' v-nobīde ”: šī vērtība nosaka vertikālo attālumu.
' aizmiglot ”: trešā vērtība ir izplūdums. Maksimizējot tā vērtību, tiks palielināts izplūšanas efekts.
' izplatība ”: ceturtā vērtība apzīmē ēnu izplatību. Tajā var būt pozitīvas vai negatīvas vērtības, kur pozitīvā vērtība palielina starpību, bet negatīva samazina to.
' krāsa ”: šī vērtība nav obligāta, un tā atspoguļo pašreizējo krāsu.
' sākotnējā ”: šī vērtība iestata tās sākotnējās vērtības rekvizītu.
' mantot ”: šī vērtība manto tās vecākelementa īpašību.
' ielaidums ”: ievietotā vērtība tiek izmantota, lai lodziņā izveidotu ēnas.

Apskatīsim, kā izskatās ēnu efekts, izmantojot praktisku piemēru.

Piemērs

HTML failā vispirms pievienojiet '

”. Šim

elementam pievienojiet tagus

un
, lai nodrošinātu tīmekļa lapas saturu.

HTML

< div >

< h1 > Kastes ēna < / h1 >

< lpp > lodziņa ēna: 3 pikseļi 8 pikseļi < / lpp >

< / div >

Tagad pievienojiet CSS rekvizītus pievienotajiem HTML elementiem.

CSS

div {

kaste-ēna : 3 pikseļi 8 pikseļi ;

}

Div elements tiek lietots ar rekvizītu ' kaste-ēna ' ar vērtību ' 3 pikseļi 8 pikseļi ”, kas apzīmē horizontālo nobīdi un vertikālo nobīdi.

Izvade

Nākamajā sadaļā HTML elementi tiks veidoti ar dažādiem rekvizītiem.

CSS

div {

robeža : 5 pikseļi ciets rgb ( 255 , 111 , 1 ) ;

kaste-ēna : 3 pikseļi 8 pikseļi 9 pikseļi 4 pikseļi #f4af1b ;

}

Tālāk ir norādīti div elementam piemērotie papildu CSS rekvizīti:

' robeža ” rekvizītam tiek piešķirta vērtība 5px solid rgb(255, 111,1), kur 5 pikseļi norāda apmales platumu, solid apzīmē apmales stilu un rgb(255, 111, 1) ir krāsa.
' kaste-ēna ” rekvizīts ar vērtību 3 pikseļi 8 pikseļi 9 pikseļi 4 pikseļi #f4af1b apzīmē h nobīdi kā 3 pikseļus, v nobīdi kā 8 pikseļus, izplūšanu kā 9 pikseļus, izplatību kā 4 pikseļus, un #f4af1b norāda krāsu.

Iepriekš norādītais kods parādīs div elementu, kā parādīts zemāk:

Tagad nākamajā sadaļā izveidojiet divus lodziņus, kas attēlo divus div elementus. Mēs katram norādīsim dažādas vairāku lodziņu ēnas vērtības un novērosim rezultātus.

HTML

= 'box1' >

> Kastes ēna >

> kaste-ēna : 3 pikseļi 8 pikseļi 9 pikseļi 4 pikseļi #f4af1b >

> > >

= 'box2' >

> Kastes ēna >

> kaste-ēna : 3 pikseļi 8 pikseļi 9 pikseļi 4 pikseļi #f4af1b >

>

Stila kaste1 div

#box1 {

platums : 40% ;

augstums : 140 pikseļi ;

robeža : 5 pikseļi ciets #ff9c83 ;

kaste-ēna : 8 pikseļi 10 pikseļi 15 pikseļi 20 pikseļi #807f7f ;

}

Šeit:

' #box1 ” tiek izmantots, lai piekļūtu div ar id box1.
' platums īpašība tiek izmantota elementa platuma iestatīšanai.
' augstums ” rekvizīts nosaka elementa augstumu.
' robeža ” ir dota vērtība 5px solid #ff9c83 kur 5px norāda apmales platumu, solid apzīmē apmales stilu un #ff9c83 ir krāsa.
' kaste-ēna 'īpašums tiks iestatīts kā ' 8px 10px 15px 20px #807f7f ” kur 8 pikseļi ir horizontāla nobīde, 10 pikseļi ir vertikāla nobīde, 15 pikseļi ir izplūšanas efekts, 20 pikseļi ir izkliedes efekts un #807f7f ir ēnas krāsa.

Stila box2 div

#box2 {

platums : 40% ;

augstums : 140 pikseļi ;

robeža : 5 pikseļi ciets rgb ( 255 , 111 , 1 ) ;

kaste-ēna : ielaidums 4 pikseļi 8 pikseļi #f4af1b ;

piemale-kreisais : 350 pikseļi ;

}

Var novērot, ka mēs esam izveidojuši box2 div ar tādām pašām īpašībām:

Bonusa padoms: vairāku ēnu pievienošana HTML elementam

' kaste-ēna ” var izmantot, lai HTML elementam pievienotu vairākus ēnu efektus. To var izdarīt, izmantojot komatus starp visām ēnām, kā parādīts zemāk esošajā piemērā:

kaste-ēna : 6 pikseļi 6 pikseļi rgb ( 91 , 0 , 143 ) , 12 pikseļi 5 pikseļi rgb ( 201 , 8 , 8 ) , 16 pikseļi 16 pikseļi 8 pikseļi rgb ( 226 , 213 , 29 ) ;

Kā redzat, ir veiksmīgi pielietotas vairākas ēnas:

Tas viss bija par CSS apmales ēnas izmantošanu.

Secinājums

' kaste-ēna ” CSS rekvizīts tiek izmantots, lai HTML elementiem lietotu ēnu efektus. Šis rekvizīts galvenokārt sastāv no divām vērtībām, kas paredzētas horizontālajai nobīdei un vertikālajai nobīdei, taču var būt vairākas vērtības, piemēram, izplūšanas efektam, izkliedes rādiusa efektam, krāsai un citām vērtībām. Turklāt elementiem var pievienot arī vairākas ēnas, izmantojot komatus starp katru lodziņa ēnu rekvizītu. Šajā rakstā ir izskaidrots CSS lodziņa ēnas rekvizīts ar praktiskiem piemēriem.

CSS apmales ēna