box-shadow [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== 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>