बॉक्स छाया

Question

के दायीं तरफ निकालें मुझे जो कुछ भी पूछ रहा है उसके समान कई पद मिल गए हैं और इस पर घंटों तक काम कर रहे हैं और आखिर में फैसला किया कि मुझे शायद कुछ बाहरी सलाह चाहिए :)।

मैं बॉक्स-छाया का उपयोग करके एक div के 3 पक्षों को छाया करने की कोशिश कर रहा हूं, मैं सही पक्ष को छायाहीन होना चाहता हूं लेकिन यह नहीं समझ सकता कि शीर्ष पर अनदेखा करने के तरीके पर बहुत सी पोस्ट हैं लेकिन अनगिनत प्रयासों के बाद इसे भी लागू नहीं करें।

Answer 1

मुझे लगता है कि आप 2 विकल्प हैं)।

box-shadow: -30px 0px 10px 10px #888888; 

हालांकि इस तरह आपके ऊपर और नीचे एक ही छाया आकार नहीं होगा।

2) एक div के अंदर एक div का उपयोग करें और प्रत्येक को छाया लागू करें।

.div1 
{ 
    box-shadow: -30px 10px 20px 10px #888888; 
} 
.div2 
{ 
    box-shadow: -30px -10px 20px 10px #888888; 
} 

फिर आपको इच्छित व्यक्ति के आकार को समायोजित करना होगा। http://jsfiddle.net/EwgKF/19/

Answer 2

इस उदाहरण का उपयोग कर की कोशिश नहीं दाईं ओर सीमा है:

1) बाईं ओर अपने छाया की क्षैतिज संरेखण सेट (ऋणात्मक मानों:

JsBin Demo

Answer 3

उपयोग :after छद्म तत्व:

यहाँ, एक jsfiddle है http://jsfiddle.net/romiguelangel/YCh6F/

एचटीएमएल

<ul> 
    <li><a href="#">item</a></li> 
    <li class="hello"><a href="#">item with after element</a></li> 
</ul> 

सीएसएस

li { 
    display: block; 
    position: relative; 
    -webkit-box-shadow: 0 0 2px 1px gray 
} 

.hello:after{ 
    display: block; 
    background-color: #f3f5f6; 
    width: 20px; 
    height: 38px; 
    content: " "; 
    position: absolute; 
    top: 0; 
    right: -10px 
} 

Answer 4

यदि आप केवल partial support के साथ प्रयोगात्मक तकनीक का उपयोग करने के इच्छुक हैं, तो आप clip path property का उपयोग कर सकते हैं।

यह आपको वास्तव में प्रभाव प्रदान करेगा जो मुझे विश्वास है कि आप बाद में हैं: शीर्ष पर एक सामान्य बॉक्स छाया, बाएं और नीचे किनारों और दाएं किनारे पर साफ कट ऑफ। इस मुद्दे के कई अन्य समाधानों के परिणामस्वरूप छायाएं होती हैं जो "विलुप्त हो जाती हैं" क्योंकि वे किनारे के पास होती हैं जिनके पास कोई छाया नहीं होती है।

आपके मामले में आप क्लिप-पथ का उपयोग करेंगे: inset (px px px px); जहां पिक्सेल मानों को किनारे से गणना में गणना की जाती है (नीचे देखें)।

#container { 
    box-shadow: 0 0 5px rgba(0,0,0,0.8); 
    clip-path: inset(-5px 0px -5px -5px); 
} 

इस पर सवाल में div क्लिप होगा:

• 5 पिक्सल ऊपरी किनारे से ऊपर
• 0 दाएं किनारे से पिक्सल (छाया शामिल करने के लिए) (छाया को छिपाने के लिए)
निचले किनारे से ऊपर
• 5 पिक्सल बाएँ किनारे के बाहर
• 5 पिक्सल (छाया शामिल करने के लिए) (छाया शामिल करने के लिए)

012,

ध्यान दें कि पिक्सेल मानों के बीच कोई कॉमा आवश्यक नहीं है।

div का आकार लचीला हो सकता है।