Рассмотрим

box-shadow

1•положительные значения по вертикали и горизонтали;
2•отрицательные значения по вертикали и горизонтали;

1•

2•

1• <img style="box-shadow: 4px 4px 6px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

2• <img style="box-shadow: -4px -4px 6px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

• Если потянуть окошко кодов за праый нижний угол, то можно изменить его размер [показать]
3• Blur radius и spread radius. В чем их разница?
• blur radius (Размытие)

• <img style="box-shadow: 4px 4px 0px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

• <img style="box-shadow: 4px 4px 10px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

• spread radius - толщина тени.

видим, что тень рассеивается на большую площадь

• <img style="box-shadow: 4px 4px 10px 0px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

• <img style="box-shadow: 4px 4px 10px 10px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

4•text-shadow

Синтаксис очень похож на box-shadow: Значения аналогичные, только нет spread-shadow - толщина тени.

<*p style="Код шрифта">Ваша запись<*/p>

Всем привет!

• <*p style="text-shadow: 4px 4px 10px#ffff66;">Всем привет!<*/p>

Всем привет!

• <p style="text-shadow: 4px 4px 5px#000000;"><font size="+5"><font face="Silver Age"> <text size="5"><text color="#ffcc66">Всем привет!</text></text> </font></font></p>

А теперь заглянем сюда

shpargalkablog ru

• Как сделать выпуклый элемент
• в этой рамочке убрем тег rgba(*,*,*,.*)-получим такой эффект

Ваш текст

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: inset -3px -3px 8px, inset 3px 3px 8px, 3px 3px 8px -3px;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• в этой рамочке сохраним тег rgba(*,*,*,.*)-получим такой эффект

Ваш текст

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• а если картинку сделаем фоном?
1•

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

2•

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: inset -3px -3px 8px, inset 3px 3px 8px, 3px 3px 8px -3px;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

•Многослойный блок с помощью box-shadow

Ваш текст

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: 6px 6px #989898, 12px 12px #6c6666;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

1•
<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 6px 6px #99ff00, 12px 12px #009900;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

2•
<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: inset -13px -13px 18px, inset 13px 13px 18px, 13px 13px 18px -13px;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

Эффект тени блока

Ваш текст

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>


<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• если убрать rgba(*,*,*,.*)



<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px ;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• Тень вокруг

Ваш текст

<center><table width="500" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="500" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);" background="Фон под текст" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:22px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>


<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>


<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px ;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>
Вот и все... в этом я разобралась

Серия сообщений "*** уроки":

Часть 1 - комментики на скорую руку
Часть 2 - Делаем простую Рамку с двигающимся текстом.
...
Часть 15 - Делаем круглые картинки без ФШ
Часть 16 - Внутренние тени изображений и текста
Часть 17 - Изучаю тени...
Часть 18 - Как сделать тени в рамочке и на картинках
Часть 19 - мастерская ZOMKI -рамочка
...
Часть 36 - РАСШИРЕННЫЙ РЕДАКТОР ЛИру
Часть 37 - образцы и формулы нарядных РАМОЧЕК для текста
Часть 38 - Учимся делать рамочки