CSS cascading skygger

[scootergrisen]

Jeg har nogen CSS skygger som jeg gerne vil genbruge så jeg har lavet
det til en class :

.skygge1 {
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4);
}

Bruger det sådan her :
<div class="skygge1">noget</div>

Nogen gange vil jeg så gerne have en ekstra skygge på.

.skygge2 {
box-shadow: outset 0 2px 2px rgba(0, 0, 0, 0.4);
}

Også vil jeg gerne gøre sådan her :
<div class="skygge1 skygge2">noget</div>

Men problemer er at den første box-shadow bliver overskrevet af den
anden box-shadow så kun den sidste skygge vises.

Hvordan gør jeg så jeg kan få begge skygger ved at genbruge classerne ?

[Jens Peter Karlsen]

Det kan du ikke. Seneste deklaration af box-shadow vil "vinde".

Regards Jens Peter Karlsen.

Post by scootergrisen
Hvordan gør jeg så jeg kan få begge skygger ved at genbruge classerne ?

[Philip Nunnegaard]

Post by scootergrisen
Jeg har nogen CSS skygger som jeg gerne vil genbruge så jeg har lavet
.skygge1 {
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4);
}

Jens har givet svaret på dit spørgsmål, så jeg tillader mig at indskyde
min oplevelse:

Jeg kendte slet ikke til muligheden, men det ligner noget der først
understøttes om 1-2 browserversioners tid. Ingen af mine browsere ser i
hvert fald til at understøtte det.

(ie 9, FF 21.0, Google Chrome 27.x, Opera 12.12)

[Jonathan Stein]

Post by scootergrisen
Nogen gange vil jeg så gerne have en ekstra skygge på.

Du kan lave et element inden i et andet med hver sin skygge - f.eks. en
<div> i en <div>.
- Eller du kan forsøge med to skygger adskilt med komma (box-shadow:
<skygge 1>, <skygge 2>). Så skal elementet med to skygger dog kun have
den ene klasse, som definerer begge skygger.

Det burde være under støttet i de nyere browsere, men det ville ikke
undre mig, hvis de tolkede lidt forskelligt, når man begynder at sætte
flere skygger sammen...

M.v.h.

Jonathan