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

Ja, Sie können die Eigenschaft shadow spread der Regel box-shadow verwenden:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

Die vierte Eigenschaft dort -2px ist die Schattenverteilung, mit der Sie die Verteilung des Schattens ändern können, so dass es so aussieht, als ob der Schatten nur auf einer Seite liegt.

Auch hier gelten die Regeln für die Positionierung von Schatten 10px sendet es nach rechts (horizontaler Versatz) und 0px hält es unter dem Element (vertikaler Versatz).

5px ist der Unschärferadius :)

Hier ein Beispiel für Sie .

Answer 2

clip-path ist jetzt (2020) eine der einfachsten Möglichkeiten, um Box-Shadows auf bestimmten Seiten von Elementen zu erzielen, insbesondere, wenn der gewünschte Effekt ein "sauber geschnittener" Schatten an bestimmten Kanten ist (ich glaube, das war es, wonach der Auftraggeber ursprünglich gesucht hat), etwa so:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

<div class="shadow-element"></div>

...im Gegensatz zu einem abgeschwächten/reduzierten/verdünnten Schatten wie diesem:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

<div class="shadow-element"></div>

Wenden Sie einfach das folgende CSS auf das betreffende Element an:

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Wo:

• Apx legt die Schattensichtbarkeit für den oberen Rand fest
• Bpx rechts
• Cpx unten
• Dpx links

Geben Sie einen Wert von 0 für alle Kanten ein, an denen der Schatten ausgeblendet werden soll, und einen negativen Wert (der dem Radius des Box-Shadow Blur entspricht). Xpx ) an allen Kanten, an denen der Schatten angezeigt werden soll.

Answer 3

Meine selbst entwickelte Lösung, die leicht zu bearbeiten ist:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>

css:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}

Demo:
http://jsfiddle.net/jDyQt/103

Answer 4

Um den Beschnitteffekt auf bis zu zwei Seiten zu erhalten, können Sie Pseudoelemente mit Hintergrundverläufen verwenden.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

fügt links und rechts von den Elementen, aus denen ein Dokument normalerweise besteht, einen schönen schattenähnlichen Effekt hinzu.

Answer 5

Verwenden Sie einfach ::after oder ::before Pseudoelemente, um den Schatten hinzuzufügen. Machen Sie es 1px und positionieren Sie es auf welcher Seite Sie wollen. Unten ist ein Beispiel für oben.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>