CSS-Box Schatten funktioniert nicht

Der Box-Schatten funktioniert nicht. Andere div box-shadow Arbeit ganz gut, das ist mein HTML-Code:CSS-Box Schatten funktioniert nicht

#header { 
 
    background-color: #6666ff; 
 
    box-shadow: 20px 20px 10px #888888; 
 
} 
 

 
#header .headercontent .setting { 
 
    float: right; 
 
} 
 

 
#header .headercontent a { 
 
    color: #000066; 
 
    text-decoration: none; 
 
} 
 

 
#header .headercontent { 
 
    list-style: none; 
 
} 
 
#container{ 
 
    width:100%; 
 
    background-color:#ccffff; 
 
}

<div id="header"> 
 
    <div class="headercontent"> 
 
    <a href="index.php"> 
 
     <font size="6">Mine</font> 
 
    </a> 
 
    <input type="text" placeholder="Cari"> 
 
    <nav class='setting'> 
 
     <ul> 
 
     <li><a href="testingone.php">testing 1</a></li> 
 
     <li><a href="testingtwo.php">testing 2</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<div id="container">testing my body container</div>

-EDIT-
i erstellen Dummy Seite scheint die Container Hintergrundfarbe ovveride Schatten

Quelle

2017-05-21 faddi

was ist damit nicht funktioniert? – j08691

Der von Ihnen bereitgestellte Code erzeugt einen Box-Schatten. Manchmal scheint es, dass der Schatten nicht angewendet wird, wenn er von einem anderen Element verdeckt wird (das ist positioniert und hat einen hohen Z-Index). – zgood

Ich lege den Box-Schatten in sehr Elternteil div aber der Schatten wird nicht angezeigt, ich setze die Grenze die Grenze zeige gut ich lege in div header und Klasse headercontent der Schatten ist in der Mitte div. Wie ist es mein Code Fehler? – faddi

kann Bitte seien Sie klarer, was nicht funktioniert. Ich habe versucht, den gleichen Code auszuführen und den angezeigten Boxschatten gefunden.

Sie auch die Geige hier https://jsfiddle.net/zxytmgjL/ #header { background-color: #6666ff; box-shadow: 10px 10px #888888; }

Quelle

2017-05-21 03:10:18 snehgin

hi, ich habe bearbeiten meine post, die container div nächste von header hintergrundfarbe überschreiben mein schatten – faddi

@faddi - Jalas code funktioniert. Bitte beziehen Sie sich darauf. – snehgin

überprüfen können müssen Sie die box-shadow transparent,

Prüfung das Snippet

#header { 
 
    background-color: #6666ff; 
 
    box-shadow: 20px 20px 10px rgba(0,0,0,0.4); 
 
position: relative; 
 
} 
 

 
#header .headercontent .setting { 
 
    float: right; 
 
} 
 

 
#header .headercontent a { 
 
    color: #000066; 
 
    text-decoration: none; 
 
} 
 

 
#header .headercontent { 
 
    list-style: none; 
 
} 
 
#container{ 
 
    width:100%; 
 
    background-color:#ccffff; 
 
height:500px; 
 
}

<div id="header"> 
 
    <div class="headercontent"> 
 
    <a href="index.php"> 
 
     <font size="6">Mine</font> 
 
    </a> 
 
    <input type="text" placeholder="Cari"> 
 
    <nav class='setting'> 
 
     <ul> 
 
     <li><a href="testingone.php">testing 1</a></li> 
 
     <li><a href="testingtwo.php">testing 2</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<div id="container">testing my body container</div>

Header relativ machen & machen

Quelle

2017-05-21 07:59:31 Jala

CSS-Box Schatten funktioniert nicht

Antwort

Verwandte Themen