css - सीएसएस बॉक्स छाया नीचे केवल




css3 underline (3)

इस प्रश्न का उत्तर यहां दिया गया है:

मैं यह कैसे करु? मैं चाहता हूं कि मेरा तत्व इस तरह दिखने लगे कि इसमें छाया छाया रेखा है। मैं अन्य 3 पक्षों के लिए छाया नहीं चाहता


अपने पूर्ण नियंत्रण में बॉक्स-छाया प्राप्त करने के लिए इसे आज़माएं।

    <html>

    <head>
        <style> 
            div {
                width:300px;
                height:100px;
                background-color:yellow;
                box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
           }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

    </html>

यह बाहरी बॉक्स-छाया पर भी लागू होगा।


आप दो तत्वों का उपयोग कर सकते हैं, एक दूसरे के अंदर, और बाहरी एक overflow: hidden और एक चौड़ाई को आंतरिक तत्व के बराबर चौड़ाई के साथ एक साथ पैडिंग के साथ ताकि अन्य सभी तरफ की छाया "कट ऑफ" हो

#outer {
    width: 100px;
    overflow: hidden;
    padding-bottom: 10px;
}

#outer > div {
    width: 100px;
    height: 100px;
    background: orange;

    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

वैकल्पिक रूप से, आंतरिक तत्व को आकार देने के कारण बाहरी तत्व को फ़्लोट करें। देखें: http://jsfiddle.net/QJPd5/1/


यह करो:

box-shadow: 0 4px 2px -2px gray;

यह वास्तव में बहुत आसान है, आपने कभी भी धुंध (तीसरा मान) सेट किया है, इसे प्रसारित करने के लिए प्रसार (चौथा मान) सेट करें।







box-shadow