केवल एक तरफ बॉक्स छाया डालें?

Question

क्या किसी भी तरह से किसी div के एक तरफ इन्सेट बॉक्स-छाया हो सकता है? ध्यान दें कि मैं इन्सेट बॉक्स-छाया के बारे में बात कर रहा हूं, सामान्य बाहरी बॉक्स-छाया नहीं।

उदाहरण के लिए, निम्नलिखित JSFiddle में, आप देखेंगे कि इन्सेट छाया सभी 4 पक्षों पर अलग-अलग डिग्री में दिखाई देती है।

मैं इसे शीर्ष पर केवल दिखाने के लिए कैसे प्राप्त करूं? या सबसे ऊपर केवल ऊपर और नीचे?

JSFiddle:http://jsfiddle.net/ahmadka/KFrun/

HTML:

<div class="myDiv"> 
    <div class="text"> 
     Lorem ipsum .... 
    </div> 
</div> 

सीएसएस:

.box 
{ 
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000; 
    box-shadow: inset 0px 5px 10px 1px #000000; 
} 

.text 
{ 
    padding:20px; 
} 

Answer 1

चाल एक दूसरे .box-inner अंदर है, जो की तुलना में चौड़ाई में बड़ा है है मूल .box, और box-shadow उस पर लागू होता है।

फिर, अतिरिक्त चौड़ाई के लिए .text पर और पैडिंग जोड़ा गया।

इस तरह तर्क लग रहा है:

और यहाँ है कि यह कैसे सीएसएस में किया है:

के लिए .inner-box .box कारण नहीं व्यापक प्राप्त करने के लिए करने के लिए

उपयोग अधिकतम चौड़ाई, और overflow सुनिश्चित करने के लिए शेष क्लिप किया गया है:

.box { 
    max-width: 100% !important; 
    overflow: hidden; 
} 

110% माता-पिता से अधिक व्यापक है बच्चे के संदर्भ में 100% (वही होना चाहिए जब माता-पिता .box में निश्चित चौड़ाई है, उदाहरण के लिए)। नकारात्मक मार्जिन चौड़ाई के लिए साइन अप कर सकते हैं और कारण तत्व (केवल सही हिस्सा छिपने के बजाय) केंद्रित हो रहे हैं:

.box-inner { 
    width: 110%; 
    margin-left:-5%; 
    margin-right: -5%; 
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000; 
    box-shadow: inset 0px 5px 10px 1px #000000; 
} 

और एक्स अक्ष पर कुछ गद्दी जोड़ने के व्यापक .inner-box की भरपाई के लिए:

.text { 
    padding: 20px 40px; 
} 

Here's a working Fiddle.

आप फिडल का निरीक्षण किया, तो आप देखेंगे:

Answer 2

यह थोड़ा करीब आता है।

.box 
{ 
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000; 
    box-shadow: inset -1px 10px 5px -3px #000000; 
} 

Answer 3

यह कोशिश, शायद उपयोगी ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9; 
        -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 
        -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 
        -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 

CSS ऊपर

कारण आप नीचे में एक बॉक्स छाया है।
आप और अधिक Here

Answer 4

यह वही है जो आप ढूंढ रहे हैं। इसमें एक छाया के साथ आप चाहते हैं कि प्रत्येक पक्ष के लिए उदाहरण हैं। http://jsfiddle.net/KFrun/171/

.top-box 
{ 
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4); 
} 
.left-box 
{ 
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4); 
} 
.right-box 
{ 
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4); 
} 
.bottom-box 
{ 
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4); 
} 

Answer 5

काफी थोड़ी देर हो चुकी है, लेकिन एक नकली जवाब गद्दी फेरबदल या अतिरिक्त divs जोड़ना आवश्यक नहीं है कि यहां पाया जा सकता:

अधिक उदाहरण के लिए जे एस बेला देखें Have an issue with box-shadow Inset bottom only। इसमें कहा गया है, "। चौथा लंबाई जो प्रसार दूरी को परिभाषित करता है के लिए एक नकारात्मक मान का उपयोग करें यह अक्सर अनदेखी, लेकिन समर्थित है सभी प्रमुख ब्राउज़रों द्वारा"

से

उत्तर देने के fiddle:

box-shadow: inset 0 -10px 10px -10px #000000;