HTML DOM box-shadow प्रॉपर्टी का उपयोग किसी तत्व के फ्रेम के अंदर या चारों ओर छाया (shadow) को प्राप्त या सेट करने के लिए किया जाता है।
सिंटैक्स निम्नलिखित है:
boxShadow प्रॉपर्टी सेट करना:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
प्रॉपर्टी मान निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| none | यह डिफ़ॉल्ट मान है और कोई छाया प्रदर्शित नहीं करता है। |
| h-offset | यह निर्दिष्ट करता है कि छाया क्षैतिज ऑफसेट से कितनी दूर होगी। यह एक आवश्यक मान है और सकारात्मक मान बताता है कि छाया बॉक्स के दाईं ओर से होगी जबकि नकारात्मक मान का अर्थ है कि यह बॉक्स के बाईं ओर से होगी। |
| v-offset | यह निर्दिष्ट करता है कि छाया लंबवत ऑफसेट से कितनी दूर होगी। यह एक आवश्यक मान है और सकारात्मक मान बताता है कि छाया बॉक्स के नीचे की ओर से होगी जबकि नकारात्मक मान का अर्थ है कि यह बॉक्स के ऊपर की ओर से होगी। |
| blur | ब्लर रेडियस निर्दिष्ट करने के लिए। |
| spread | स्प्रेड रेडियस निर्दिष्ट करने के लिए। |
| color | छाया का रंग निर्दिष्ट करने के लिए। |
| inset | यह किसी तत्व के लिए छाया को बाहरी से आंतरिक बनाता है। |
| initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए boxShadow प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #DIV1 { height: 100px; width: 100px; box-shadow: 10px 10px 3px orange; } </style> <script> function changeBoxShadow(){ document.getElementById("DIV1").style.boxShadow="1px 10px 10px 10px green"; document.getElementById("Sample").innerHTML="बॉक्स शैडो अब बदल गया है"; } </script> </head> <body> <div id="DIV1">यह एक नमूना div है</div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div बॉर्डर चौड़ाई बदलें</p> <button onclick="changeBoxShadow()">बॉक्स शैडो बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
बॉक्स शैडो बदलें बटन पर क्लिक करने पर:
