თვისება box-shadow

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

სინტაქსი

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

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

პარამეტრები

პარამეტრი	აღწერა
`inset`	არასავალდებულო პარამეტრი. თუ იგი მითითებულია, ჩრდილი იქნება კონტეინერის შიგნით, თუ არა - გარეთ.
წანაცვლება x-ზე	აყენებს ჩრდილის წანაცვლებას X ღერძზე. დადებითი მნიშვნელობა აწევს მარჯვნივ, უარყოფითი - მარცხნივ.
წანაცვლება y-ზე	აყენებს ჩრდილის წანაცვლებას Y ღერძზე. დადებითი მნიშვნელობა აწევს ქვემოთ, უარყოფითი - ზემოთ.
დაბინდვა	აყენებს ჩრდილის დაბინდვას. რაც უფრო დიდია მნიშვნელობა - მით უფრო დაბინდული იქნება ჩრდილი. არასავალდებულო პარამეტრი. თუ არაა მითითებული - ჩრდილი იქნება მკვეთრი.
ჩრდილის ზომა	აყენებს ჩრდილის ზომას. დადებითი მნიშვნელობა ჭიმავს ჩრდილს, უარყოფითი კი, პირიქით, შეკუმშავს მას. არასავალდებულო პარამეტრი. თუ არაა მითითებული - ჩრდილი იქნება ელემენტის ზომის.
ფერი	აყენებს ჩრდილის ფერს ნებისმიერ ფერის ერთეულში. არასავალდებულო პარამეტრი. თუ არაა მითითებული - ჩრდილის ფერი ემთხვევა ტექსტის ფერს.

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

მაგალითი

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

თვისება text-shadow,
რომელიც არქმევს ჩრდილს ტექსტს