CSS para gradiente de caja de sombra y las fronteras

Question

¿Es posible hacer esto en CSS:

Answer 1

En realidad, no respondiendo a su pregunta, pero si usted necesita para hacer esto (y no tiene que estar en css), supongo que ya tiene eso creado en algún otro programa, por lo que puede encontrar esto útil: a farewell to css3 gradients

Answer 2

Creo que esto podría abordarse con dos divs teniendo cada uno un radial gradient. Aquí hay un tool to experiment con degradados. También proporciona un código específico del proveedor.

Answer 3

aquí es mi 2 centavos:

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 anchura y la altura son no sólo para que pueda ver algo. Creo que esto funcionará en la mayoría de los navegadores modernos (aunque es un poco detallado)

Answer 4

He aquí algo que he reunido. Puedes jugar un poco con eso si quieres.

http://jsfiddle.net/Gk6xJ/

Answer 5

que estoy haciendo algo similar en un sitio:

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%;