Различия

Показаны различия между двумя версиями страницы.

--- box-shadow [2023/09/25 18:23]
tro
+++ box-shadow [2023/09/26 17:18] (текущий)
tro
@@ Строка 8: / Строка 8: @@
   * spread — радіус поширення. Позитивне значення збільшує тінь, негативне — зменшує. Необов'язкове значення.
   * color — колір тіні. Можна використовувати будь-який формат запису кольору. Необов'язкове значення.
+<code>
+.box {
+width: 400px;
+height: 400px;
+backgroud-color: red;
+box-shadow: 10px -10px 10px 12px red;
+}
+</code>
+===== Багатошарова тінь =====
+<code>
+box-shadow: <x-offset> <y-offset> <blur> <spread> <color>,
+            <x-offset> <y-offset> <blur> <spread> <color>,
+            <x-offset> <y-offset> <blur> <spread> <color>,
+</code>
+Можна зробити дкілька тіней
+<code>
+.box {
+width: 400px;
+height: 400px;
+backgroud-color: red;
+box-shadow: 10px -10px 10px 12px red, -10px 10px 10px 12px blue;
+}
+</code>
+===== Зовнішня тінь =====
+<code>
+box-shadow: unset <x-offset> <y-offset> <blur> <spread> <color>
+</code>
+===== Внутрішня тінь =====
+ Синтаксис оголошення внутрішньої тіні аналогічний синтаксису звичайної тіні, але першим значенням необхідно вказати **inset**.
+<code>
+box-shadow: inset <x-offset> <y-offset> <blur> <spread> <color>
+</code>