बॉक्स-शैडो गुण

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 गुण,
जो टेक्स्ट को छाया प्रदान करता है