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 հատկությունը,
որը ստվեր է ավելացնում տեքստին