Entfernen Sie die rechte Seite der Box Schatten

Question

Ich habe viele Beiträge gefunden, die ähnlich zu dem, was ich fragen und habe gearbeitet, um dies für Stunden und schließlich entschied ich sollte wahrscheinlich einige äußere Ratschläge suchen :).

Ich versuche, 3 Seiten eines div mit Box-Schatten Schatten Ich will die rechte Seite zu schattenlos sein, aber kann es nicht herausfinden, gibt es viele Beiträge auf, wie man die Spitze un-Schatten, aber nach unzähligen Bemühungen konnte ich wende das nicht einmal an.

Answer 1

Ich glaube, Sie haben 2 Möglichkeiten:

1) Stellen Sie die horizontale Ausrichtung des Schattens nach links (negativen Werte).

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

Obwohl Sie auf diese Weise nicht die gleiche Schattengröße oben und unten haben.

2) Verwenden Sie ein Div innerhalb eines div und wenden Sie Schatten auf jedes.

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

Dann müssen Sie die Größe für die gewünschte Größe anpassen.

Hier haben jsfiddle: http://jsfiddle.net/EwgKF/19/

Answer 2

versuchen, dieses Beispiel verwendet, hat nicht rechte Seite Grenze:

JsBin Demo

Answer 3

Verwenden :after Pseudoelement: http://jsfiddle.net/romiguelangel/YCh6F/

HTML

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

CSS

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

Wenn Sie experimentelle Technologie mit nur partial support verwenden möchten, können Sie die clip path property verwenden.

Dadurch erhalten Sie genau den Effekt, den Sie glauben: einen normalen Schatten auf der oberen, linken und unteren Kante und sauber abgeschnitten am rechten Rand. Viele andere SO-Lösungen für dieses Problem führen zu Schatten, die sich "auflösen", wenn sie sich der Kante nähern, die keinen Schatten haben soll.

In Ihrem Fall würden Sie clip-path: einfügen (px px px px); wo die Pixelwerte von der fraglichen Kante berechnet werden (siehe unten).

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

Dies wird die div betreffenden Clip an:

• 5 Pixel über dem oberen Rand (einschließlich der Schatten)
• 0 Pixel von der rechten Kante (den Schatten zu verbergen)
• 5 Pixel oberhalb der Unterkante (einschließlich der Schatten)
• 5 Pixel außerhalb des linken Randes (einschließlich der Schatten)

012.

Beachten Sie, dass zwischen den Pixelwerten keine Kommas erforderlich sind.

Die Größe des div kann flexibel sein.