HTML DOM बॉक्स-शैडो प्रॉपर्टी का उपयोग किसी तत्व के फ्रेम में या उसके आसपास शैडो को प्राप्त करने या सेट करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैबॉक्सशैडो प्रॉपर्टी सेट करना -
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
संपत्ति के मूल्यों को इस प्रकार समझाया गया है -
| Value | <वें शैली="पाठ्य-संरेखण:केंद्र; चौड़ाई:90.8843%;">विवरण|
|---|---|
| कोई नहीं | यह डिफ़ॉल्ट मान है और कोई छाया प्रदर्शित नहीं करता है। |
| h-offset | यह निर्दिष्ट करता है कि छाया क्षैतिज ऑफसेट से कितनी दूर होगी। यह एक आवश्यक मान है और सकारात्मक मान बताता है कि छाया बॉक्स के दाईं ओर से होगी जबकि नकारात्मक मान का अर्थ है कि यह बॉक्स के बाईं ओर से होगी। |
| v-offset | यह निर्दिष्ट करता है कि लंबवत ऑफसेट से छाया कितनी दूर होगी। यह एक आवश्यक मान है और सकारात्मक मान बताता है कि छाया बॉक्स के नीचे की ओर से होगी जबकि नकारात्मक मान का अर्थ है कि यह बॉक्स के ऊपर की ओर से होगी। |
| धुंधला | धुंधला त्रिज्या निर्दिष्ट करने के लिए। |
| फैलें | स्प्रेड त्रिज्या निर्दिष्ट करने के लिए। |
| रंग | छाया रंग निर्दिष्ट करने के लिए। |
| इनसेट | इससे किसी तत्व के लिए छाया बाहरी से भीतरी की ओर आती है। |
| आरंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य प्राप्त करने के लिए |
आइए बॉक्सशैडो प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!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="The box shadow is changed now ";
}
</script>
</head>
<body>
<div id="DIV1">This is a sample div</div>
<p>Change the above div border width by clicking the below button</p>
<button onclick="changeBoxShadow()">Change Box Shadow</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“बॉक्स शैडो बदलें” . पर क्लिक करने पर बटन -
