Wie kann ich einen Kastenschatten auf einer Seite eines Elements hinzufügen?

Ich muss einen Kastenschatten für ein blockElement erstellen , aber nur (zum Beispiel) auf seiner rechten Seite. Ich wickle das innere Element mit box-shadowin ein äußeres mit padding-rightund overflow:hidden;so sind die drei anderen Seiten des Schattens nicht sichtbar.

Gibt es einen besseren Weg, um dies zu erreichen? Wie box-shadow-right?

EDIT : Meine Absicht ist es, nur den vertikalen Teil des Schattens zu erstellen . Genau das Gleiche wie repeat-ydie Regel background:url(shadow.png) 100% 0% repeat-y.

Ja, Sie können die Shadow Spread-Eigenschaft der Box-Shadow-Regel 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 -2pxist die Schattenausbreitung. Sie können sie verwenden, um die Ausbreitung des Schattens zu ändern, sodass der Schatten nur auf einer Seite angezeigt wird.

Hierbei werden auch die Schattenpositionierungsregeln verwendet, die 10pxnach rechts gesendet werden (horizontaler Versatz) und 0pxunter dem Element bleiben (vertikaler Versatz).

5px ist der Unschärferadius :)

Beispiel für Sie hier .

Meine selbst erstellte Lösung, die einfach 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

Um den abgeschnittenen Effekt auf bis zu zwei Seiten zu erzielen, 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 normalerweise ein Dokument besteht, einen schönen schattenartigen Effekt hinzu.

Verwenden Sie einfach das Pseudoelement :: after oder :: before, um den Schatten hinzuzufügen. Machen Sie es 1px und positionieren Sie es auf der gewünschten Seite. Unten ist ein Beispiel von 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>

Hier ist mein Beispiel:

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

<div class="box">
</div>

Hier ist ein kleiner Hack, den ich gemacht habe.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Erstellen Sie <div class="one_side_shadow"></div>rechts unter dem Element, für das ich den einseitigen Feldschatten erstellen möchte (in diesem Fall möchte ich einen einseitigen Einschubschatten, id="element"der von unten kommt).

2. Dann habe ich einen Regular box-shadowmit einem negativen vertikalen Versatz erstellt, um den Schatten nach oben zur Seite zu schieben.

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

Dies könnte ein einfacher Weg sein

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

Weisen Sie dies einem beliebigen div zu

Hier ist ein Codepen , der für jede Seite demonstriert werden soll, oder ein funktionierender Ausschnitt:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

Diese Seite hat mir geholfen: https://gist.github.com/ocean90/1268328 (Beachten Sie, dass auf dieser Seite links und rechts zum Datum dieses Beitrags vertauscht sind ... aber sie funktionieren wie erwartet). Sie werden im folgenden Code korrigiert.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

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

Ich erstelle einen vertikalen Block für den Schatten und platziere ihn neben 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 hier .

Ok, hier ist noch ein Versuch. Verwenden von Pseudoelementen und Anwenden des Shadow-Box-Porperty über diese.

html:

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

sass:

.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