Potrójne i odstające ramki

Taki śmieszny efekt na dziś :)

«Waść ma krzyż w herbie — wołał Podhajski — to skryta
Aluzyja, że w rodzie bywał neofita».
«Fałsz — przerwał Birbasz — Przecież ja z tatarskich hrabiów
Pochodzę, a mam krzyże nad herbem Korabiów».
«Poraj — krzyknął Mickiewicz — z mitrą w polu złotym,
Herb książęcy, Stryjkowski gęsto pisze o tym».
~Pan Tadeusz, Księga czwarta

U napierśnika wisi księżyc w kształt Leliwy,
To jest w kształt nowiu. Cały ten sprzęt osobliwy,
Zdobyty (jak wieść niesie) w boju podhajeckim
Na jakimś bardzo znacznym szlachcicu tureckim,
Przyjm, Asesorze, w dowód mojego szacunku».
~Pan Tadeusz, Księga jedenasta

W przypadku pierwszym mamy niebieskie tło, białą ramkę i niebieski cień. W drugim mamy tło, wewnętrzny cień, ramkę i zewnętrzny cień. By zawartość elementu nie najeżdżała na cień trzeba dodać do kodu właściwość padding o wartości takiej jak wielkość cienia. A teraz kod.

div.ramka1 {text-align: center; width: 350px; height: 110px; background: lightskyblue; border: 5px solid black; box-shadow: 0 0 0 5px lightskyblue; margin: auto; margin-top: 20px}
div.ramka2 {text-align: center; width: 350px; height: 110px; background: #ffeec7; border: #8d739e solid 5px; box-shadow: 0 0 0 5px #f2b5c4 inset, 0 0 0 5px #facbbb; margin: auto; margin-top: 20px; padding: 5px}

Pogrubienia to kolory, wartości niebieskie to grubości ramek i cieni, wartości zielone mogą rozmyć cienie, fioletowe je przesunąć, różowe to rodzaj ramki, na szaro są rzeczy niezwiązane z samym efektem, które napisałam, by prostokąty wyglądały, jak chcę. Selektory można oczywiście zmienić.

Efekt na żywo można zobaczyć na Mniej Doskonałych, archiwum: