creación de una frontera difusa en CSS 3

Question

imagen Aquí está mi fuente:

Y mi imagen fuente ampliada o reducida en:

Alguna idea sobre cómo lograr esto con sólo el CSS3 ? Observe el ligero sangrado hacia arriba en el elemento.

Answer 1

Mire css3 property border-radius. Tiene opciones para el color de compensación xey y el radio de desenfoque. En su caso, un color grisáceo sin compensación y borroso si 4px debería funcionar.

Answer 2

Probablemente pueda salirse con la suya estableciendo el borde con un color claro y un contorno a un color más oscuro, luego simplemente ajuste el radio del borde. Tenga en cuenta que no he probado esto, y si la memoria sirve, el contorno no se curva con border-radius. También tenga en cuenta que border-radius requiere que se configuren varios atributos para que se vuelvan compatibles entre navegadores. Consulte http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/ para obtener más información.

Si esto falla, siempre puede usar un div interno, que se establece en la posición absoluta, 0 a la izquierda, 0 a la derecha, 0 superior e inferior 0 y luego usarlo como el borde interno o externo. Establecer el radio del borde definitivamente funcionará entonces.

Saludos, Richard

Answer 3

Esto se hace realmente con dos CSS3 box-shadow s.

CSS:

#fuzz 
{ 
    height: 100px; 
    width: 100px; 
    border-radius: 5px; 
    border: 1px solid #333; 
    box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333; 
} 

Usted puede verlo en acción cuando regrese al equipo real para editar el violín :-) (usando mi tableta ahora)

Obviamente cambiar los colores a su gusto :)

Answer 4

Es simplemente usando dos sombras, una caja de inserción y el otro principio, es decir:

.box { 
    width: 100px; 
    height: 100px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1); 
    border: solid #ccc 1px; 
    border-radius: 10px; 
    margin: 50px 0 0 50px; 
} 

Ver aquí: http://jsfiddle.net/WYLJv/

Answer 5

Actualización: He quitado los prefijos de proveedores, ya que casi todos los navegadores que soporta estas propiedades no los necesita. Dejarlos caer se considera una mejor práctica en este punto.

Consulte la página de Caniuse para border-radius y box-shadow.

la mejor (y única) manera de hacer esto es utilizar múltiples cajones-sombras:

element { 
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px; 
    border-radius: 20px; 
} 

box-shadow funciona así:

box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size]; 

border-radius funciona así:

border-radius: [size]; 

/*or*/ 

border-radius: [topleft/bottomright size] [topright/bottomleft size]; 

/*or*/ 

border-radius: [topleft] [topright] [bottomright] [bottomleft]; 

se puede especificar la altura de una longitud de la curva de la siguiente manera:

border-radius: [tl-width] [tr-width] [br-width] [bl-width]/[tl-height] [tr-height] [br-height] [bl-height]; 

Answer 6

estoy un poco tarde, pero, sí, utilice el radio de fronteras y box-shadow (s) y usted debe ser bueno para ir.

.block { 
    border-radius:6px; 
    box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee; 
} 

Answer 7

Intente agregar un radio de borde y una sombra de texto en su css.

.box { 
    border-radius:20px; 
    text-shadow:2px 2px black; 
} 

Espero que esto ayude.