तत्वों से कास्टिंग छाया (अक्सर "ड्रॉप शैडोज़" कहा जाता है, जैसे फ़ोटोशॉप में)। यहां सबसे गहरी संभव ब्राउज़र समर्थन के साथ एक उदाहरण दिया गया है:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )वह:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- छाया के क्षैतिज ऑफसेट (आवश्यक), सकारात्मक का मतलब है कि छाया बॉक्स के दाईं ओर होगी, एक नकारात्मक ऑफसेट बॉक्स के बाईं ओर छाया डाल देगा।
- छाया के ऊर्ध्वाधर ऑफसेट (आवश्यक), एक नकारात्मक एक का मतलब है बॉक्स-छाया बॉक्स के ऊपर होगा, एक सकारात्मक एक का मतलब है कि छाया बॉक्स के नीचे होगी।
- धब्बा त्रिज्या (आवश्यक), यदि 0 पर सेट किया गया तो छाया तीव्र होगी, संख्या जितनी अधिक होगी, उतना ही अधिक धुंधला होगा, और आगे छाया का विस्तार होगा। उदाहरण के लिए, क्षैतिज ऑफसेट के 5px के साथ एक छाया जिसमें 5px धुंधला त्रिज्या भी है, कुल छाया की 10px होगी।
- प्रसार त्रिज्या (वैकल्पिक), सकारात्मक मान छाया के आकार को बढ़ाते हैं, नकारात्मक मान आकार में कमी करते हैं। डिफ़ॉल्ट 0 है (छाया धब्बा के समान आकार है)।
- रंग (आवश्यक) - हेक्स, नामित, आरजीबीए या एचएसएलए जैसे किसी भी रंग का मूल्य लेता है। यदि रंग मान छोड़ दिया जाता है, तो बॉक्स छाया अग्रभूमि रंग (पाठ
color) में खींचा जाता है । लेकिन जागरूक रहें, पुराने WebKit ब्राउज़र (क्रोम 20 और सफारी 6) रंग को छोड़ दिए जाने पर नियम की अनदेखी करते हैं।
जैसे एक अर्ध-पारदर्शी रंग का उपयोग करना rgba(0, 0, 0, 0.4)सबसे आम है, और एक अच्छा प्रभाव है, क्योंकि यह पूरी तरह से / अपारदर्शी रूप से कवर नहीं करता है कि यह क्या खत्म हो गया है, लेकिन एक वास्तविक छाया की तरह, बिट के माध्यम से दिखाने के लिए नीचे क्या अनुमति देता है।
उदाहरण
भीतरी छाया
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )उदाहरण
इंटरनेट एक्सप्लोरर (8 और नीचे) बॉक्स छाया
आपको एक अतिरिक्त तत्व की आवश्यकता है, लेकिन यह सक्षम है filter।
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )वन-साइड ओनली
एक नकारात्मक प्रसार त्रिज्या का उपयोग करके, आप एक बॉक्स छाया में निचोड़ कर सकते हैं और केवल एक बॉक्स के एक किनारे से इसे धक्का दे सकते हैं।
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )एकाधिक सीमाएँ और अधिक
आप अपनी इच्छानुसार किसी भी समय अलग-अलग बॉक्स-शैडो को कॉमा कर सकते हैं। उदाहरण के लिए, यह अलग-अलग स्थिति और एक ही तत्व पर अलग-अलग रंगों के साथ दो छाया दिखाता है:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;उदाहरण दिखाता है कि आप कई सीमाओं को बनाने के लिए कैसे उपयोग कर सकते हैं:
पेन मल्टीपल बॉक्स-शैडो ठंडक देखें! CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा।
छद्म तत्वों के लिए छाया को लागू करने से जो आप फिर हेरफेर करते हैं, आप कुछ सुंदर फैंसी 3 डी दिखने वाले बॉक्स छाया प्राप्त कर सकते हैं:
कोडप्लेन पर Halil imbrahim Nuroğlu (@haibnu) द्वारा पेन CSS3 बॉक्स छाया प्रभाव देखें।
कई अल्पविराम से अलग मूल्यों के साथ सुपर चिकनी छाया:
कोडपीन
पर क्रिस कॉयर (@chriscoyier) द्वारा पेन चिकनी बॉक्स-छाया देखें ।
ब्राउज़र का समर्थन
विक्रेता उपसर्ग कवरेज पर बारीकियों के लिए पृष्ठ के शीर्ष पर स्निपेट देखें। यह उन गुणों में से एक है जहां उपसर्गों को छोड़ना इस बिंदु पर बहुत उचित है।