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 қасиеті,
бұл мәтінге көлеңке тағайындайды