Kann CSS3 Box-Shadow: Inset nur eine oder zwei Seiten? wie Border-Top?

80

Ich wundere mich über die Unterstützung für seitenspezifische innere Schatten in CSS3.

Ich weiß, dass dies in unterstützten Browsern hervorragend funktioniert.

div { box-shadow:inset 0px 1px 5px black; }

Ich bin nur neugierig, ob es einen Weg gibt, etwas zu erreichen wie: 

div { box-shadow-top:inset 0px 1px 5px black; }
css ndmweb
quelle
Mögliches Duplikat von Wie man Box-Shadow nur auf der linken und rechten Seite erhält , das detailliertere Antworten und Erklärungen enthält.
Brichins

Antworten:

147

Das hat bei mir funktioniert:

box-shadow: inset 1px 4px 9px -6px;

Beispiel: http://jsfiddle.net/23Egu/

nischtname
quelle
9
Die bisher eleganteste Lösung.
Enyo
Genial! Ich habe für immer damit gekämpft, aber diese einzelne Linie bringt den sexy einseitigen Rand aller Zeiten. Danke, Mann!
Sliq
12
Es ist erwähnenswert, dass Sie dies box-shadow: inset 1px -4px 9px -6px;für einen unteren Schatten ändern können.
Justin Russell
7
Schatten der linken Seite: Schatten der box-shadow: inset 4px 1px 9px -6px; rechten Seite:box-shadow: inset -4px 1px 9px -6px;
Bryanbraun
hmm also alles was wir tun ist, dass wir einen großen Spread-Wert verwenden und ihn dann mit negativer Unschärfe negieren. Clever
Samiullah Khan
11

Ich glaube nicht, dass Sie es wirklich brauchen, box-shadow-topdenn wenn Sie offsetxauf 0 und offsetyeinen positiven Wert setzen, befindet sich nur der verbleibende Schatten oben.

Wenn Sie Schatten oben und Schatten unten haben möchten, können Sie einfach zwei Divs verwenden:

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

Wenn Sie Schatten an den Seiten entfernen möchten, verwenden Sie rgbaanstelle von hexFarbe und stellen Sie sie größer ein offsety:

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

Auf diese Weise geben Sie dem Schatten mehr Deckkraft, sodass die Seiten verborgen bleiben und mit mehr Versatz weniger Deckkraft erhalten

vollständiges Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>
Seler
quelle
Und der Schatten wird weiter verbreitet sein, als Sie vielleicht möchten. Und auch die Seiten haben sich verschoben. Es ist definitiv ein anderes Ergebnis als box-shadow-topes geben würde. edit Aber so mache ich es normalerweise auch =)
Rudie
@Rudie, wenn Sie Schatten auf den Seiten entfernen möchten, verwenden Sie rgbaanstelle von hexFarbe und setzen offsetySie den Wert größer : Box-Schatten: 0 5px 5px rgba (0,0,0, .5) Auf diese Weise geben Sie dem Schatten mehr Deckkraft, damit die Seiten verborgen bleiben und mit mehr Versatz erhalten Sie weniger Deckkraft
Seler
3
Zu Ihrer Information, anstatt zwei verschachtelte Divs zu haben, um gleichzeitig einen oberen und einen unteren Schatten zu erzielen, können Sie dies mit einem Div tun:box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;
Jake Wilson
10

Verwenden von :beforeund afterElementen mit regelmäßigen Schatten, die von overflow:hiddender übergeordneten Box abgeschnitten wurden, wie in diesem Beispiel: http://dabblet.com/gist/2585782

CSS

/**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;    
}

#element:before , #element:after{
  content: "\0020";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

HTML

<div id="element"></div>
Jakob Cosoroaba
quelle
Dies ist die Technik, die bei mir funktioniert hat. In meinem Fall war #element scrollbar, daher musste ich die Position auf klebrig ändern, damit es funktioniert.
Mihai Răducanu
5

In den meisten Fällen können Sie einen Hintergrundverlauf für eine Problemumgehung verwenden:

Beispiel für SCSS (mit Kompass):

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
Omar Jalalzada
quelle
1
Manchmal müssen wir einfach zurücktreten und darüber nachdenken, was wir erreichen wollen. Und das ist oft das, wonach wir mit einem einseitigen inneren Kastenschatten suchen. Brillant. Ich würde zweimal upvoten, wenn ich könnte!
random_user_name
Als ich diesen Kommentar zum ersten Mal sah, fand ich ihn viel zu kompliziert, um jemals zu arbeiten, aber er funktionierte perfekt. Vielen Dank!!
Alex
4 
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

Das funktioniert einfach wunderbar :)

Hier ist ein Codepen, der dies veranschaulicht: http://codepen.io/poopsplat/pen/cGBLy

Poopsplat
quelle
3

Für den gleichen Schatten, aber nur oben:

box-shadow: inset 0px 6px 5px -5px black;

Um den Schatten in eine Richtung zu bringen, müssen Sie den Parameter "Unschärfe" mit dem Parameter "Ausbreitung" negieren und dann die Parameter "h-pos" und / oder "v-pos" um denselben Wert anpassen. Es funktioniert nicht mit gegenüberliegender oder dreifacher Grenze. Sie müssen eine weitere Definition hinzufügen.

Weitere Beispiele hier: http://codepen.io/GBMan/pen/rVXgqP

GBMan
quelle
1

Nein, nicht direkt, aber Sie können die Teile, die Sie nicht möchten, abschneiden, indem Sie sie in ein div setzen mit overflow: hidden:

http://jsfiddle.net/Vehdg/

Mark Kahn
quelle
1

Ich hatte dieses Problem gerade selbst. Die Lösung, die ich gefunden habe, war mit mehreren Box-Schatten (einer für jede Seite, auf der Sie Ihren Schatten haben möchten). Hier ist die Definition:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Hier ist, wie man es denkt:

  • Machen Sie zuerst den Spread 0 (dies deaktiviert den Effekt auf allen Seiten)
  • der h-Versatz (wenn Sie ihn positiv einstellen, wird er auf der linken Seite gewirkt, wenn Sie ihn negativ einstellen, auf der rechten Seite)
  • Der V-Versatz (wenn Sie ihn positiv einstellen, wird er auf der Oberseite, wenn Sie ihn negativ einstellen, auf der Unterseite geworfen

Hier sehen Sie meinen Fall mit Kastenschatten auf drei Seiten (links, oben, rechts und unten haben die gleiche Farbe wie der Hintergrund, um den gewünschten Effekt zu erzielen - die linke Seite und die rechte Seite gehen ganz nach unten ) https://codepen.io/cponofrei/pen/eMMyQX

Cristi Onofrei
quelle
0

Sie können einen einseitigen inneren Schatten erzielen, indem Sie Ihr Div auf setzen overflow:hiddenund Schattenelemente entlang der Ränder hinzufügen.

Setzen Sie einen inneren Schatten auf den oberen und unteren Rand einer Abteilung:

HTML 

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</div>

CSS

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
Jason George
quelle
Viele würden argumentieren, dass das Hinzufügen eines solchen zusätzlichen Markups nicht semantisch und eine schlechte Praxis ist. Dies könnte erreicht werden inset, indem die Werte des Box-Shadow-CSS verwendet und kreativ werden. Denken Sie daran, dass Sie Kastenschatten auf dasselbe Element stapeln können. Man könnte also so etwas wie @Jakobud verwenden, das in einem obigen Kommentar gesagt wurde: box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black; Eine andere Möglichkeit, die nur geringfügig weniger anstößig ist als das Hinzufügen unnötiger Markups, ist die Verwendung von :beforeund :afterSelektoren. Aber warum tun Sie das, wenn Sie dies tun können, indem Sie das ursprüngliche Element direkt auswählen und gestalten?
ORyan
0

box-shadowist für alle vier Seiten. Das kannst du (noch?) Nicht ändern. Die 4 Größen in der box-shadowDefinition sind OffsetX, offsetY, Blurund Spread.

Rudie
quelle
1
Spread und Blur sind nicht dasselbe. Für jeden gibt es separate Werte. Technisch gesehen gibt es 6 Inset/Outset, OffsetX, OffsetY, BlurRadius, SpreadRadiusund Color. Wie andere bereits box-shadow: inset 0 8px 6px -6px black;
betont
1
Wahr. Ich habe die Antwort geändert, um alle 4 Größen wiederzugeben .
Rudie
0

Mehrere Kastenschatten haben den Trick für mich getan.

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

shaunw
quelle