CSS per gradiente scatola di ombra e confini

Question

è possibile fare questo in CSS:

Answer 1

Non proprio rispondere alla tua domanda, ma se hai bisogno di fare questo (e non c'è bisogno di essere in css), suppongo che tu lo abbia già creato in qualche altro programma, quindi potresti trovare questo utile: a farewell to css3 gradients

Answer 2

Penso che questo possa essere affrontato con due div ciascuna avendo un radial gradient. Ecco uno tool to experiment con sfumature. Fornisce anche codice specifico del fornitore.

Answer 3

Ecco il mio 2 centesimi:

HTML:

<div class="upperDiv"></div> 
<div class="lowerDiv"></div> 

CSS:

.upperDiv { 
width:500px; 
height: 40px; 

background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -o-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 567, color-stop(0, #E4E4E4), color-stop(1.5, #FDFDFD)); 
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 

} 

.lowerDiv { 
width:500px; 
height: 40px; 

background-image: -ms-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -moz-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -o-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -webkit-gradient(radial, center top, 0, center top, 567, color-stop(0, #FDFDFD), color-stop(0.8, #F0F0F0)); 
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
} 

La larghezza e l'altezza sono lì solo così è possibile vedere qualcosa. Penso che funzionerà sulla maggior parte dei browser moderni (anche se è un po 'prolisso)

Answer 4

Ecco qualcosa che ho messo insieme. Puoi fare un po 'di scherzi se vuoi.

http://jsfiddle.net/Gk6xJ/

Answer 5

che sto facendo qualcosa di simile su un sito:

width: 60%; height: 20px; background-image: -moz-radial-gradient(center top , ellipse farthest-side, rgba(100, 100, 100, 0.5), rgba(100, 100, 100, 0) 75%), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.5), rgba(200, 200, 200, 0)), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.3), rgba(200, 200, 200, 0)); background-repeat: no-repeat; background-size: 100% 5px, 100% 10px, 100% 15%;