Teszt-variációk "border-radius" és inset/outset "box-shadow" esetenként "background-image/size"

"LordWebber" kérésére a "Kép árnyék CSS-sel" kérdéséhez

(Tesztelve: Firefox-5.0, Opera-11.50, Chrome-13.0.782.41, Safari-5.0.5 és IE-6,7,8 alatt)

outDIV("border-radius", outset "box-shadow") / inDIV(0px "border-radius", inset "box-shadow")



Tartalom


outDIV("border-radius", inset "box-shadow") / inIMG(0px "border-radius", outset "box-shadow" képpel)

(Ez volt az elfogadott megoldás, melynél az Opera esetében az "<img>" elem "felülbírálja" a sílusban megadott "border-radius"-t)


outDIV("border-radius", outset "box-shadow" és "background-image/size") / inDIV(0px "border-radius", inset "box-shadow")

Duál DIV

Külső DIV: "background-image", "border-radius" és "box-shadow"
Belső DIV: "border-radius" és inset "box-shadow"


Nagyobb méretben)

Duál DIV

Külső DIV: "background-image/size", "border-radius" és "box-shadow"
Belső DIV: "border-radius" és inset "box-shadow"



outDIV("border-radius", outset "box-shadow") / inDIV(0px "border-radius", inset "box-shadow") / contentDIV

(Csak ez jó teljesen az IE-6,7,8 alatt)
Lorem ipsum dolor ...
Lorem ipsum dolor ...


outDIV("border-radius", outset "box-shadow" és "background-image/size") / inDIV(0px "border-radius", inset "box-shadow") / contentDIV

Lorem ipsum dolor ...
Lorem ipsum dolor ...

Készült: 2011. 07. 03.  Family Team©

A megjelenés képekben különböző böngészőkkel

Firefox Opera Chrome Safari IE-6,7,8
Letölthető nagyításra "jobbklikk/kép mentése másképp"

Vissza a TESZTEK-re