Pregunta Error de sombra de caja y radio de borde en Chrome


He estado experimentando con CSS3 y he encontrado algo extraño. Heres es la parte del estilo DIV:

border:#446429 solid 1px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;

La representación en Opera y Firefox son iguales y perfectas:

texto alternativo http://i47.tinypic.com/j8egp5.png

Pero Chrome muestra sombra fuera de la frontera:

texto alternativo http://i45.tinypic.com/5doykw.png

¿Se supone que es así o me perdí algo importante?


32
2018-05-30 06:15


origen


Respuestas:


Parece un error conocido:

http://code.google.com/p/chromium/issues/detail?id=29427

Consulte la discusión de errores, puede encontrar una solución. Definitivamente, este error se debe tener en cuenta si quieres que se solucione antes.


27
2018-05-30 06:24



Colocar primero una sombra insertada del mismo color que el fondo parece funcionar bastante bien sin poner marcas adicionales en su página.

P.ej. si tuvieras una página de fondo blanco:

-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset;

6
2018-02-15 16:57



Acabo de encontrar una solución, pero necesita un marcado adicional. Necesitamos un elemento de lugar con esquinas redondeadas y sombra interior en otro contenedor con lo mismo esquinas redondeadas y desbordamiento oculto.

<div class="foo"><div>Hello!</div></div>
<style type="text/css">
    .foo {-webkit-border-radius: 10px; overflow: hidden;}
    .foo div {-webkit-border-radius: 10px; -webkit-box-shadow: inset 1px 1px rgba(50%, 50%, 50%, .5);}
</style>

La corrección anunciada anteriormente con el borde bloquea el radio del borde y no se puede ver con la imagen de fondo debajo del elemento (debido al color del borde).

Gracias.


3
2017-12-30 13:43



La única solución que he visto es poner un borde en el elemento con la sombra y hacer que ese borde sea más ancho que la difusión sombra. Entonces, para una sombra insertada como esta:

box-shadow:inset 0 0 7px #000;

Debería agregar un borde como este:

border:solid 7px #fff;

Es el tercer número en la declaración de sombreado de caja que debe coincidir (o superar) con el ancho del borde. si no quieres un borde antiguo gordo en el elemento, obviamente necesitarás hacer que el borde sea del mismo color que el fondo detrás de él. Por lo tanto, esta solución no ayuda mucho si su elemento está por encima de una imagen con diseño o un degradado. Pero en colores sólidos funciona decentemente.


3
2017-11-15 19:24



¡Buenas noticias! Parece que está llegando una solución. Aquí está el ticket en WebKit Bugzilla, marcado como resuelto / arreglado: https://bugs.webkit.org/show_bug.cgi?id=41576

¡Y aquí está el compromiso con el enlace en el Trac de WebKit! http://trac.webkit.org/changeset/74089


1
2017-12-15 20:19



Pruebe esto -webkit-box-shadow: inserción 0px 0 7px rgba (255, 242, 94, 0.4); usar rgba parece arreglarlo.

¡Buena suerte!


0
2017-09-06 11:48



El uso de valores negativos me ha solucionado el problema.

-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;

0
2018-01-05 22:50



Este error ha sido reparado en la última versión de canary. :)


0
2018-01-08 08:35



La solución de Beth Fauld casi funciona, solo hay un pequeño error, debería verse de la siguiente manera:

-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset;

Donde #fff es el color de fondo (fuera del cuadro) y # 333 es el color de la sombra.

El tercer valor en -webkit-box-shadow define el tamaño de desenfoque, mientras que el cuarto define el tamaño de sombra (opaco), por lo que es el último el que se debe establecer en 1px.


0
2018-03-16 09:41