540 Stimmen

tillda avatar

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

Gefragt el 25 de Februar, 2011
Wann wurde die Frage gestellt
489773 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

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.

Gefragt el 25 de Februar, 2011 von tillda

Antworten

Zu viele Anzeigen?

6voto

Webpixstudio avatar
Webpixstudio Punkte 157

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>
Beantwortet el 2 de August, 2013 von Webpixstudio (157 Punkte )

4voto

Nicht registrierter Benutzer avatar
Nicht registrierter Benutzer Punkte 0

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 einer <div class="one_side_shadow"></div> direkt unter dem Element, für das ich den einseitigen Boxschatten erstellen möchte (in diesem Fall möchte ich einen einseitigen Einschubschatten für id="element" von unten kommend)

2. Dann habe ich eine reguläre box-shadow einen negativen vertikalen Versatz verwenden, um den Schatten nach oben zu einer Seite zu schieben.

`box-shadow: 0 -8px 20px 2px #DEDEE3;`
Beantwortet el 8 de Juni, 2012 von Nicht registrierter Benutzer (0 Punkte )

4voto

ROOT avatar
ROOT Punkte 10903

Hier ist ein codepen für jede Seite zu demonstrieren, oder einen Arbeitsausschnitt:

.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>
Beantwortet el 19 de Marsch, 2020 von ROOT (10903 Punkte )

2voto

madhairsilence avatar
madhairsilence Punkte 3740

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

Beantwortet el 16 de Februar, 2013 von madhairsilence (3740 Punkte )

1voto

ter24 avatar
ter24 Punkte 422

Diese Website hat mir geholfen: https://gist.github.com/ocean90/1268328 (Beachten Sie, dass auf dieser Website die linke und rechte Seite zum Zeitpunkt der Veröffentlichung dieses Beitrags vertauscht sind... aber sie funktionieren wie erwartet). Sie werden im nachstehenden 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>
Beantwortet el 22 de November, 2013 von ter24 (422 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X