Wie kann ich einen Box-Shadow auf einer Seite eines Elements hinzufügen?

Question

Ich muss einen Box-Shadow für einige block Element, aber nur (zum Beispiel) auf seiner rechten Seite. Die Art und Weise, wie ich es tue, besteht darin, das innere Element zu umhüllen mit box-shadow in eine äußere mit padding-right y overflow:hidden; so dass die drei anderen Seiten des Schattens nicht sichtbar sind.

Gibt es eine bessere Möglichkeit, dies zu erreichen? Zum Beispiel box-shadow-right ?

EDIT : Meine Absichten sind die Schaffung seulement der vertikale Teil des Schattens. Genau dasselbe wie das, was repeat-y der Regel background:url(shadow.png) 100% 0% repeat-y tun würde.

Answer 1

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

Answer 2

Ich erstelle einen vertikalen Block für den Schatten und platziere ihn an der Stelle, an der sich mein Blockelement befinden soll. Die beiden Blöcke werden dann in einen anderen Block eingewickelt:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

jsFiddle-Beispiel aquí .

Answer 3

Ok, hier ist noch ein Versuch. Mit Pseudo-Elemente und aplying die Schatten-Box porperty über sie.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

Frechheit:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ