CSS3 Box Shadow über Kinder

Wie bekomme ich einen Inset CSS3 Box Schatten, um über seine Kinder Elemente zu rendern?CSS3 Box Shadow über Kinder

Problem:

alt text

HTML:

<div id="chatroom"> 
    <div class="chatmessage"><b>User 1:</b>Test</div> 
    <div class="chatmessage"><b>User 2:</b>Test</div> 
    <div class="chatmessage"><b>User 1:</b>Test</div> 
    <div class="chatmessage"><b>User 2:</b>Test</div> 
</div>

CSS:

#chatroom{ 
    border: 1px solid #CCC; 
    height: 135px; 
    font-size: 0.75em; 
    line-height: 1.2em; 
    overflow: auto; 
    -moz-box-shadow: inset 0 0px 4px rgba(0,0,0,.55); 
    -webkit-box-shadow: inset 0 0px 4px rgba(0,0,0,.55); 
} 
.chatmessage{ 
    padding: 4px 2px; 
} 
.chatmessage b{ 
    margin-right: 2px; 
} 
.chatmessage:nth-child(2n) { 
    background: #EEE; 
}

Quelle

2010-03-08 Ronald

kann nicht direkt von CSS erfolgen .. (es Schatten ist nicht, ob es geht überschneidende Elemente)

müßten Sie Ihre HTML ein bisschen zu überarbeiten, indem ein div Hinzufügen (oder ein Pseudo-Element zu verwenden, wie durch miguelcobain's Antwort vorgeschlagen), um den Schatten und CSS zu überlagern, um die neue div machen die Schatten ..

#chatroom { 
 
    border: 1px solid #CCC; 
 
    height: 135px; 
 
    font-size: 0.75em; 
 
    line-height: 1.2em; 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 

 
.shadow { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    -moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55); 
 
    -webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55); 
 
} 
 

 
.chatmessage { 
 
    padding: 4px 2px; 
 
} 
 

 
.chatmessage b { 
 
    margin-right: 2px; 
 
} 
 

 
.chatmessage:nth-child(2n) { 
 
    background: #EEE; 
 
}

<div id="chatroom"> 
 
    <div class="chatmessage"><b>User 1:</b>Test</div> 
 
    <div class="chatmessage"><b>User 2:</b>Test</div> 
 
    <div class="chatmessage"><b>User 1:</b>Test</div> 
 
    <div class="chatmessage"><b>User 2:</b>Test</div> 
 
    <div class="shadow"></div> 
 
</div>

Quelle

2010-03-08 15:51:08

Danke! Du bist schnell! :) – Ronald

Ich habe eine Follow-up-Frage. Wie Sie sehen können, hat #chatroom einen Überlauf, der auf auto gesetzt ist, so dass er scrollbar ist, sobald er mit genügend Inhalt gefüllt ist. Wenn Sie das div scrollen, scrollt das Schattenelement ebenfalls. Gibt es eine einfache Möglichkeit, die Größen anzupassen? Ich habe versucht, die Höhe des Schattens mit scrollHeight einzustellen, aber das scheint flockig. Irgendwelche Ideen? – Ronald

Also hacken wir im Grunde wieder Sachen. Das ist traurig. :( –

ich empfehle box-shadow zusammen mit -moz-box-shadow und -webkit-box-shadow verwenden.

Dies ist kompatibel mit Future (und Opera 10.5;)).

Quelle

2010-03-09 12:38:27

Ändern Sie die Hintergrundfarbe der Kinder hier auch sein RGBA (dies wird nur in Browsern festgelegt, die es verstehen, die, bequem, ist jeder Browser, der den Schatten umgehen kann):

.chatmessage:nth-child(2n) { 
    background : #EEE; 
    background : RGBA(0, 0, 0, .066); 
}

Beachten Sie, dass die Zwei Farben (#EEE, RGBA(0, 0, 0, .066)) sind identisch, solange der Hintergrund dahinter weiß ist.

Demo da scheinen die Menschen diese nach unten zu ohne Grund Abstimmung: http://jsfiddle.net/6NrkR/

Quelle

2011-07-13 19:30:38

Verstand, der erklärt, warum das unten abgestimmt wurde, wenn es tadellos funktioniert gut und ist eine bessere Lösung als die angenommene Antwort? Jeder Browser, der 'box-shadow' unterstützt, unterstützt auch RGBA. –

Dies scheint nur eine schlechte Lösung. In der Praxis sieht es jedoch gut aus. Also +1 von mir. – chowey

die Verwendung eines zusätzlichen Elements zu vermeiden, können Sie CSS-Pseudo-Elemente verwenden. Versuchen Sie diese demo.

#chatroom { 
    position: relative; 
} 

#chatroom:before { 
    content: ""; 

    /* Expand element */ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 

    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.55); 
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.55); 
    box-shadow: inset 0 0 8px rgba(0,0,0,.55); 

    /* Disable click events */ 
    pointer-events: none; 
}

Grundsätzlich erstellt dieses CSS dieses zusätzliche Element für Sie. Beachten Sie die pointer-events:none, um Klickereignisse durch dieses Element zu ermöglichen.

Denken Sie daran, dass pointer-events:none auf einigen Mobilgeräten nicht gut funktioniert, wenn Sie mit dem Touch-Scrolling arbeiten (Klick/Taping funktioniert gut). Ich habe deswegen keine Schatten verwendet.

Quelle

2013-03-05 11:51:26 miguelcobain

Dies sollte die akzeptierte Antwort sein! – sidonaldson

Funktioniert nicht gut, wenn das Element #chatroom ein scrollendes Element ist. Irgendwelche Ideen? –

CSS3 Box Shadow über Kinder

Antwort

Verwandte Themen