box-shadow css3
9 
4 
10 
10.5 
Siden er opdateret 31. 5. 2012
Med box-shadow kan man lave en skyggefunktion på en boks (et blok-element).
div {
height: 30px;
width: 200px;
box-shadow: 8px 8px 4px #666;
}
vil se sådan ud (border sat på boksen, så du kan se den):
Noget tekst
De 4 værdier, du ser sat på box-shadow, har følgende funktioner:
- antal pixels skyggen ligger til højre for boksen - negativ værdi sætter skyggen til venstre for boksen
- antal pixels skyggen ligger under boksen - negativ værdi sætter skyggen over boksen
- antal pixels hvormed skyggen fades ud
- skyggens farve
De nødvendige værdier:
- størrelse (husk både bredde og højde)
- definerer skyggens dimensioner i:
- px-størrelse
- skyggens dimensioner sættes i pixels
- em-størrelse
- skyggens dimensioner sættes i em
- fade
- skyggens udfadning i:
- px-størrelse
- sætter skyggens udfadning i pixels
- em-størrelse
- sætter skyggens udfadning i em
- farve
- definerer skyggens farve i:
- hex
- definerer skyggens farve i hex-værdi
- rgb
- definerer skyggens farve i rgb-værdi
Vær opmærksom på, at IE <9 på Windows samt SeaMonkey 2.0.8 og Firefox 3.6.10 på Linux ikke forstår denne egenskab, skyggen vises ikke.
