सवाल केवल बॉक्स-छाया इन्सेट तल के साथ कोई समस्या है


मैं एक आंतरिक छाया बनाने के लिए बॉक्स-छाया का उपयोग कर रहा हूँ ...

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

... लेकिन आंतरिक छाया केवल नीचे से आना चाहेंगे। मैंने इस काम को करने की कोशिश करने के कई तरीकों की कोशिश की है लेकिन नहीं कर सकता ... मैं बॉक्स-छाया के साथ ऐसा कैसे करूं?


44
2017-08-22 21:40


मूल


इसके बारे में क्या खयाल है inset 0px -10px 6px #555555;? - Majid Laissi
वास्तव में मेरे लिए काम नहीं किया था। एसीजे ने इसे दबाया - Joe


जवाब:


चौथी लंबाई के लिए ऋणात्मक मान का प्रयोग करें जो फैलाव दूरी को परिभाषित करता है। इसे अक्सर अनदेखा किया जाता है, लेकिन सभी प्रमुख ब्राउज़रों द्वारा समर्थित किया जाता है। यह देखो बेला परिणाम के लिए।

div{
    background:red;
    height:100px;
    width:200px;
    -moz-box-shadow: inset 0 -10px 10px -10px #000000;
    -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
    box-shadow: inset 0 -10px 10px -10px #000000;
}
<!doctype html>
<div></div>


105
2017-08-22 22:01



आह अच्छा धन्यवाद :) - Joe
आपका स्वागत है। यह यहां दस्तावेज (विस्तारित करने के लिए) है: सीएसएस पृष्ठभूमि और सीमाओं मॉड्यूल स्तर 3। - ACJ
निश्चित रूप से जानना अच्छा है! - Joe
box-shadow के बाद होना चाहिए -webkti-box-shadow तथा -moz-box-shadow - Shlomi Hassid
सहमत, @ShlomiHassid। मैंने इसे प्रतिबिंबित करने के लिए दोनों स्निपेट संपादित किए। - ACJ


JSnippet डेमो

केवल शीर्ष पर:

-moz-box-shadow:    inset  0  10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey;

केवल नीचे:

-moz-box-shadow:    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0 -10px 10px -10px grey;

केवल ऊपर और नीचे:

-moz-box-shadow:    inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;

त्वरित उदाहरण

.shadow-top {
    -moz-box-shadow:    inset  0  10px 10px -10px grey;
    -webkit-box-shadow: inset  0  10px 10px -10px grey;
     box-shadow:        inset  0  10px 10px -10px grey;
}
.shadow-bottom {
    -moz-box-shadow:    inset  0 -10px 10px -10px grey;
    -webkit-box-shadow: inset  0 -10px 10px -10px grey;
     box-shadow:        inset  0 -10px 10px -10px grey;
}
.shadow-top-bottom {
    -moz-box-shadow:    inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
    -webkit-box-shadow: inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
     box-shadow:        inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
}

div { display:inline-block; margin-right:15px; width:150px; height:100px; background:yellow; }
<div class='shadow-top'></div>
<div class='shadow-bottom'></div>
<div class='shadow-top-bottom'></div>


11
2018-05-25 18:24