2012-10-03 11 views
8

CSS3 के box-shadow का उपयोग करते समय मुझे कोई समस्या है जो मेरे पास आमतौर पर नहीं है।बॉक्स-छाया काट दिया जा रहा है

बॉक्स छाया आम तौर पर सिर्फ div किनारों पर खून बहती है, लेकिन इस पर नहीं।

box-shadow जाता है कि ऊपर और दाहिने हाथ की ओर काट किया जा रहा ..

यहाँ सीएसएस मैं बॉक्स छाया के लिए उपयोग कर रहा हूँ:

-moz-box-shadow: 0 0 5px #555; 
-webkit-box-shadow: 0 0 5px #555; 
box-shadow: 0 0 5px #555; 

चीयर्स

उत्तर

10

तो box-shadow है कट जा रहा है, यकीन है कि overflow:visible किसी भी div (रों) अपने तत्व में निहित है पर सेट है।

+0

मैंने मूल पोस्ट में उदाहरण साइट लिंक निकाला, इसलिए मैं भविष्य में इस मुद्दे वाले लोगों के लिए यह स्पष्टीकरण छोड़ रहा हूं। –

17

समस्या है आपका केंद्र-मुख्य div छाया के किनारे से फिसल रहा है। इस पर overflow:visible सेट करें और आपको इसे देखना चाहिए।

+0

धन्यवाद, मैंने सोचा कि यह मुद्दा था लेकिन मुझे यह नहीं देखा। आप कमाल हो। –

+0

मदद करने में खुशी :) – quoo

0

आप शो छाया बॉक्स सही ढंग से

.img{ 
    margin:20px; 
-moz-box-shadow: 0 0 5px #555; 
    -webkit-box-shadow: 0 0 5px #555; 
    box-shadow: 0 0 5px #555; 
} 
के लिए इस शैली img टैग सेट कर सकते हैं
+0

यह निश्चित रूप से, छवि की स्थिति को भी बदल देगा। – quoo

2

मैंने आईई के साथ कई बार इस समस्या में भाग लिया है, और मैंने पाया है कि सबसे अच्छा समाधान div के चारों ओर एक पारदर्शी रूपरेखा का उपयोग करना है। ऐसा लगता है कि आईई को बॉक्स छाया को क्लिप करने से रोकता है, क्योंकि यह उन मामलों में भी है जहां गेको और वेबकिट नहीं हैं। इस समस्या को ठीक करने के लिए रूपरेखा का उपयोग करने के बारे में एक बड़ी बात यह है कि यह div की स्थिति को प्रभावित नहीं करता है। पूर्ण और नीचे: -30px अपनी मूल div के लिए एक निश्चित जगह रिश्तेदार में यह डाल करने के लिए

उदाहरण के लिए, मैं एक div जिसके साथ मैं स्थिति का इस्तेमाल किया था था। आईई, और केवल आईई, बॉक्स छाया के ऊपर और नीचे काट रहा था। इस रूपरेखा को जोड़कर, स्थिति को बदले बिना इसे ठीक किया गया।

outline: 10px solid transparent; 
संबंधित मुद्दे