सामग्री के नीचे बॉक्स-छाया डालें

Question

मुझे समझ में नहीं आता क्यों, लेकिन एक इंसेट बॉक्स छाया मेरी सामग्री के नीचे है।

यहाँ एक उदाहरण है:

div { 
    box-shadow:inset 0 0 10px black; 
    height:300px; 
    color:red; 
} 

​<div> 
    a 
</div>​ 

http://jsfiddle.net/MAckM/

तुम देखो a बॉक्स छाया के शीर्ष पर है।

a के शीर्ष पर होने के लिए बॉक्स छाया कैसे प्राप्त कर सकता हूं?

Answer 1

आपको पूर्ण स्थिति और ऊंचाई और 100% की चौड़ाई के साथ div के अंदर एक नया तत्व बनाने की आवश्यकता है, फिर उस तत्व को बॉक्स छाया दें।

HTML:

<div> 
    <div></div> 
    a 
</div>​ 

सीएसएस:

div { 
    height:300px; 
    color:red; 
    position:relative; 
} 

div div { 
    box-shadow:inset 0 0 10px black; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}​ 

यहाँ एक JSFiddle है।

संपादित करें:

वैकल्पिक रूप से, आप एक छद्म तत्व का उपयोग कर सकते हैं:

HTML:

<div> 
    a 
</div>​ 

सीएसएस:

div { 
    height:300px; 
    color:red; 
    position:relative; 
} 

div:before { 
    content:''; 
    display:block; 
    box-shadow:inset 0 0 10px black; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}​ 

JSFiddle।