Wie erstelle ich einen radialen css3 border Gradientenschatten

Question

Ich habe zwei Spalten, die auf variable 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 an der Spitze und der Unterseite. Das heißt, ich kann nicht einfach ein Hintergrundbild mit CSS verwenden, das links in der Spalte auf der rechten Seite ausgerichtet ist.

Also dann, obwohl ich vielleicht kann ich eine CSS 3 Grenze Schatten verwenden, die eine radiale Gradienten aufweist. 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?

Answer 1

Vorherige Antworten nicht wirklich Ihre Frage beantworten: „Wie kann ich eine radiale css3 Grenze Gradienten Schatten schaffen“

Sie können eine radiale Gradienten verwenden, um eine Grenze Schatten ohne Bilder zu simulieren.

Demo: http://jsfiddle.net/sonic1980/wRuaZ/

background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%); 
            |  |  |  | 
            |  |  |  +--> color end  
            |  |  +--> color start 
            |  +--> size of gradient ellipse (x-axis, y-axis) 
            +---> position of ellipse center 

Es ist einfach zu ändern, um es vertikal zu machen oder implementieren mit: vor oder: nach Pseudo-Klassen.

Ein weiteres Beispiel, ein <hr> Tag mit Schatten: http://jsfiddle.net/sonic1980/65Hfc/

Answer 2

Ich habe einen Vorschlag, dass Sie keine Verwendung von CSS3 benötigen, können Sie 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.

Answer 3

Ich glaube, ich werde einfach das Bild verwenden, und legen Sie einen min-height auf dem div :-)

.column.right { 
    padding-left: 30px; 
    background: url(/img/shadow.png) no-repeat left top; 
    min-height: 265px; 
} 

Answer 4

Eine andere Lösung wäre für eine dynamische Höhe Säule tatsächlich erlauben, aber es hat nur IE8 + Unterstützung.

Was Sie tun würden, ist eine background-image an der Kante der höchsten Spalte positioniert. Dann können Sie die :before und :after Pseudoelemente verwenden, die auf absolute Positionierung von top:0; bzw. bottom:0 eingestellt sind, um die 'Kappe' auf die Schatten zu setzen.

Macht das Sinn? Hier ist eine JSFiddle, die es mit einem Rahmen und Text anstelle von Bildern zeigt.

Natürlich ist der height Parameter der div in der JSFiddle keine Konsequenz; es könnte min-height oder nicht vorhanden sein. Ich setze es einfach auf die div Größe.