Wie erstelle ich einen radialen css3-Farbverlaufsschatten
Ich habe zwei Spalten, die zu variablen Höhen strecken können, der Designer möchte einen Schatten zwischen den beiden Spalten haben, aber wie Sie sehen können, blendet das Bild oben und unten aus. Das bedeutet, ich kann nicht einfach ein Hintergrundbild mit CSS verwenden, das links in der Spalte rechts ausgerichtet ist.
Also dann könnte ich vielleicht einen css 3 Rand-Schatten verwenden, der einen radialen Gradienten hat. Wahrscheinlich werde ich dafür Tabellenzellen verwenden, weil ich den Schatten auf die Höhe der höchsten Säule strecken muss. Wie mache ich das?
4 Antworten
Vorherige Antworten beantworten Ihre Frage nicht wirklich: "Wie erstelle ich einen radialen css3-Farbverlaufsschatten"
Sie können einen radialen Farbverlauf verwenden, um einen Randschatten ohne Bilder zu simulieren.
Demo: Ссылка
Es ist einfach zu modifizieren, um es vertikal zu machen oder zu implementieren mit: before oder: after pseudo-classes.
Ein weiteres Beispiel, ein <hr> -Tag mit Schatten: Ссылка
Ich habe einen Vorschlag, dass Sie keine CSS verwenden müssen, Sie können zwei verschiedene Klassen verwenden, eine ist normal und andere hat Hintergrund. Wenn Sie die Seite beenden und die js-Methode aufrufen und settimeout auf einige Sekunden setzen, wechseln Sie die Klasse.
Ich denke, ich werde nur das Bild verwenden und eine Min-Höhe auf das div setzen: -)
%Vor%Eine andere Lösung würde tatsächlich eine Spalte mit dynamischer Höhe erlauben, aber sie hat nur IE8 + Unterstützung.
Sie würden eine background-image auf den Rand der höchsten Spalte anwenden. Dann könnten Sie die :before und :after Pseudoelemente verwenden, die auf absolute positioning von top:0; bzw. bottom:0 gesetzt werden, um die 'cap' auf den Schatten zu setzen.
Macht das Sinn? Hier ist ein JSFiddle , in dem anstelle von Bildern ein Rahmen und Text angezeigt wird.
Natürlich ist der height -Parameter von div im JSFiddle ohne Bedeutung; Es könnte min-height oder nicht vorhanden sein. Ich habe es nur so eingestellt, dass das div eine gewisse Größe hat.
Tags und Links css css3 border-shadow