Ich muss einen Kastenschatten für ein block
Element erstellen , aber nur (zum Beispiel) auf seiner rechten Seite. Ich wickle das innere Element mit box-shadow
in ein äußeres mit padding-right
und 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-y
die Regel background:url(shadow.png) 100% 0% repeat-y
.
css
shadow
box-shadow
tillda
quelle
quelle
Antworten:
Ja, Sie können die Shadow Spread-Eigenschaft der Box-Shadow-Regel verwenden:
Die vierte Eigenschaft dort
-2px
ist 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
10px
nach rechts gesendet werden (horizontaler Versatz) und0px
unter dem Element bleiben (vertikaler Versatz).5px
ist der Unschärferadius :)Beispiel für Sie hier .
quelle
box-shadow
Regeln standardisiert waren.Meine selbst erstellte Lösung, die einfach zu bearbeiten ist:
HTML:
CSS:
Demo:
http://jsfiddle.net/jDyQt/103
quelle
Um den abgeschnittenen Effekt auf bis zu zwei Seiten zu erzielen, können Sie Pseudoelemente mit Hintergrundverläufen verwenden.
fügt links und rechts von den Elementen, aus denen normalerweise ein Dokument besteht, einen schönen schattenartigen Effekt hinzu.
quelle
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.
quelle
Hier ist mein Beispiel:
quelle
Hier ist ein kleiner Hack, den ich gemacht habe.
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-shadow
mit einem negativen vertikalen Versatz erstellt, um den Schatten nach oben zur Seite zu schieben.quelle
Dies könnte ein einfacher Weg sein
Weisen Sie dies einem beliebigen div zu
quelle
Hier ist ein Codepen , der für jede Seite demonstriert werden soll, oder ein funktionierender Ausschnitt:
quelle
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.
quelle
quelle
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:
jsFiddle Beispiel hier .
quelle
Ok, hier ist noch ein Versuch. Verwenden von Pseudoelementen und Anwenden des Shadow-Box-Porperty über diese.
html:
sass:
https://codepen.io/alex3o0/pen/PrMyNQ
quelle