თვისება box-shadow

თვისება box-shadow არქმევს ჩრდილს ბლოკს. მნიშვნელობად თვისება იღებს 6 პარამეტრს, რომლებიც ჩამოთვლილია სივრცით გამოყოფილი, ან საკვანძო სიტყვას none, რომელიც ჩრდილს მთლიანად აუქმებს.

სინტაქსი

cssსელექტორი {
  box-shadow: inset წანაცვლება_x-ზე წანაცვლება_y-ზე დაბინდვა ჩრდილის_ზომა ფერი;
}

cssსელექტორი {
  box-shadow: none;
}

პარამეტრები

წანაცვლება ღერძებზე, დაბინდვა და ჩრდილის ზომა მითითებულია ნებისმიერ ზომის ერთეულში, პროცენტების გარდა.

მაგალითი

ამ მაგალითში ჩრდილი წანაცვლებულია ქვემოთ და მარჯვნივ და დაემატა მცირე დაბინდვა:

html<div id="elem"></div>

css#elem {
  box-shadow: 5px 5px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

მაგალითი . მკვეთრი ჩრდილი

ამ მაგალითში ჩრდილი წანაცვლებულია ქვემოთ და მარჯვნივ, მაგრამ დაბინდვა არ არის (ჩრდილი იქნება მკვეთრი):

html<div id="elem"></div>

css#elem {
  box-shadow: 2px 2px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

მაგალითი . ერთგვაროვანი ჩრდილი

ამ მაგალითში ჩრდილი არაა წანაცვლებული, მაგრამ მას დაემატა დაბინდვა:

html<div id="elem"></div>

css#elem {
  box-shadow: 0px 0px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

მაგალითი . ჩრდილის ზომა

ამ მაგალითში ჩრდილი არაა წანაცვლებული, დაბინდვა ნულის ტოლია, მაგრამ მას დაემატა ზომა (შავი არის საზღვარი, წითელი - ჩრდილი):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 0 3px red;
  border: 3px solid black;
  width: 300px;
  height: 50px;
}

Результат:

მაგალითი . დაბინდვა + ჩრდილის ზომა

ამ მაგალითში ჩრდილი არაა წანაცვლებული, მაგრამ მას დაემატა დაბინდვა და ზომა (შავი არის საზღვარი, წითელი - ჩრდილი):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 3px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

მაგალითი . შიდა ჩრდილი

ამ მაგალითში ჩრდილი მდებარეობს კონტეინერის შიგნით:

html<div id="elem"></div>

css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

იხილეთ აგრეთვე