Различия

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

--- box-shadow [2023/09/25 18:22]
tro создано
+++ box-shadow [2023/09/26 17:18] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== box-shadow ======
+<code>
+box-shadow: <x-offset> <y-offset> <blur> <spread> <color>
+</code>
+  * x-offset — горизонтальне зміщення. Позитивне значення зміщує тінь праворуч від блоку, негативне – ліворуч. Обов'язкове значення.
+  * y-offset — вертикальне зміщення. Позитивне значення зміщує тінь вниз, негативне - вгору. Обов'язкове значення.
+  * blur — радіус розмиття. Чим більше значення, тим сильніше розмита тінь. Необов'язкове значення.
+  * 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>