HTML on kieli, jota käytetään luomaan verkkosivujen rakenne, ja CSS antaa meille mahdollisuuden soveltaa tyylejä elementteihin. Web-sivulla eri ominaisuusarvot asetetaan käyttämään erilaisia tyylejä, kuten taustaväri, kirjasinkoko, reunus, reunan säde ja box-shadow on yksi niistä.

Tässä blogissa käsitellään menetelmää soveltaa varjotehosteita HTML-elementteihin.

Kuinka pudottaa varjovaikutus HTML-elementteihin CSS:n avulla?

' laatikko-varjo ”-ominaisuus lisää varjon elementin ympärille, jossa kaksi tai useampi lisätty tehostearvo voidaan erottaa pilkuilla.

Box-shadow-ominaisuuden syntaksi on kuvattu alla.

Syntaksi

laatikko-varjo : ei mitään |h-offset v-offset epäterävyyden leviäminen väri | upotettu | alkukirjain | inherit ;

Yllä mainitun syntaksin kuvaus on lueteltu alla:

' ei mitään ”: Se on box-shadow-ominaisuuden oletusarvo.
' h-offset ”: Tämä arvo edustaa vaakasuuntaista etäisyyttä.
' v-offset ”: Tämä arvo määrittää pystyetäisyyden.
' hämärtää ”: Kolmas arvo on sumeus. Sen arvon maksimoiminen maksimoi epäterävyyden.
' levitän ”: Neljäs arvo edustaa varjon leviämistä. Se voi sisältää positiivisia tai negatiivisia arvoja, joissa positiivinen arvo lisää eroa ja negatiivinen arvo pienentää sitä.
' väri- ”: Tämä arvo on valinnainen, ja se edustaa nykyistä väriä.
' alkukirjain ”: Tämä arvo asettaa alkuperäisen arvon ominaisuuden.
' inherit ”: Tämä arvo perii emoelementin ominaisuuden.
' upotettu ”: Inset-arvoa käytetään varjojen tekemiseen laatikon sisään.

Katsotaanpa, miltä varjoefekti näyttää käytännön esimerkin kautta.

Esimerkki

Lisää ensin HTML-tiedostoon '

”. Lisää tämän

-elementin sisään tunnisteet

ja
tarjotaksesi sisältöä verkkosivulle.

HTML

< div >

< h1 > Laatikko varjo < / h1 >

< s > laatikkovarjo: 3px 8px < / s >

< / div >

Käytä nyt CSS-ominaisuuksia lisättyihin HTML-elementteihin.

CSS

div {

laatikko-varjo : 3px 8px ;

}

Div-elementtiä käytetään ominaisuudella ' laatikko-varjo ' arvolla ' 3px 8px ”, joka edustaa vaaka- ja pystypoikkeamaa.

Lähtö

Seuraavassa osiossa HTML-elementit muotoillaan erilaisilla ominaisuuksilla.

CSS

div {

rajaa : 5px kiinteä rgb ( 255 , 111 , 1 ) ;

laatikko-varjo : 3px 8px 9px 4px #f4af1b ;

}

Seuraavat ovat div-elementtiin lisätyt CSS-ominaisuudet:

' rajaa ” -ominaisuudelle annetaan arvo 5px solid rgb(255, 111,1), jossa 5px ilmaisee reunuksen leveyden, solid edustaa reunuksen tyyliä ja rgb(255, 111, 1) on väri.
' laatikko-varjo ”-ominaisuus, jonka arvo on 3px 8px 9px 4px #f4af1b edustaa h-offsetia 3px:nä, v-offsetin arvoa 8px, sumeutta 9px:nä, leviämistä 4px:nä ja #f4af1b määrittää värin.

Yllä annettu koodi näyttää div-elementin alla olevan kuvan mukaisesti:

Luo nyt seuraavassa osiossa kaksi laatikkoa, jotka edustavat kahta div-elementtiä. Annamme jokaiselle eri useilla ruutuvarjoarvoilla ja tarkkailemme tuloksia.

HTML

= 'laatikko1' >

> Laatikkovarjo >

> laatikko-varjo : 3px 8px 9px 4px #f4af1b >

> > >

= 'laatikko 2' >

> Laatikkovarjo >

> laatikko-varjo : 3px 8px 9px 4px #f4af1b >

>

Tyylilaatikko1 div

#laatikko1 {

leveys : 40 % ;

korkeus : 140 pikseliä ;

rajaa : 5px kiinteä #ff9c83 ;

laatikko-varjo : 8px 10px 15 kuvapistettä 20px #807f7f ;

}

Tässä:

' #laatikko1 ' käytetään div-osion avaamiseen id box1:llä.
' leveys ” -ominaisuutta käytetään elementin leveyden asettamiseen.
' korkeus ”-ominaisuus määrittää elementin korkeuden.
' rajaa ” on annettu arvo 5px solid #ff9c83, jossa 5px ilmaisee reunuksen leveyden, solid edustaa reunuksen tyyliä ja #ff9c83 on väri.
' laatikko-varjo ' omaisuus asetetaan ' 8px 10px 15px 20px #807f7f ”, jossa 8px on vaakasuuntainen siirtymä, 10px on pystysiirtymä, 15px on sumennustehoste, 20px on hajautustehoste ja #807f7f on varjon väri.

Style box2 div

#laatikko2 {

leveys : 40 % ;

korkeus : 140 pikseliä ;

rajaa : 5px kiinteä rgb ( 255 , 111 , 1 ) ;

laatikko-varjo : upotettu 4px 8px #f4af1b ;

marginaali vasen : 350 pikseliä ;

}

Voidaan havaita, että olemme tyylistäneet box2 div:n samoilla ominaisuuksilla:

Bonusvinkki: Useiden varjojen lisääminen HTML-elementtiin

' laatikko-varjo ” -ominaisuutta voidaan käyttää lisäämään useita varjotehosteita HTML-elementtiin. Tämä voidaan tehdä käyttämällä pilkkuja jokaisen varjon välissä alla olevan esimerkin mukaisesti:

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

Kuten näet, useita varjoja on käytetty onnistuneesti:

Siinä oli kyse CSS-reunusvarjon käytöstä.

Johtopäätös

' laatikko-varjo ” -ominaisuutta CSS:ssä käytetään varjotehosteiden lisäämiseen HTML-elementteihin. Tämä ominaisuus koostuu pääasiassa kahdesta arvosta, jotka ovat vaaka- ja pystysiirtymiä, mutta arvoja voi olla useita, kuten sumennustehoste, hajautussäde, väri ja paljon muuta. Lisäksi voit myös lisätä elementteihin useita varjoja käyttämällä pilkkuja kunkin laatikko-varjon ominaisuuden välissä. Tässä artikkelissa on selitetty CSS:n box-shadow -ominaisuus käytännön esimerkein.

CSS-reunuksen varjo