Borde pixelado alrededor de un círculo CSS con desbordamiento: oculto;

Aquí está el JSFIDDLE de mi gato / animación sin drop-shadows para mostrar el problema lo más claramente posible. A mi entender, esto está causado por el border-radius del border-radius y posiblemente debido al overflow: hidden; .


El búho no es de lo que se trata esta pregunta, solo un ejemplo de una situación similar en la que estuve. El jsfiddle / cat es de lo que se trata esta pregunta, ¡perdón por la confusión!

Este es un JSFIDDLE para mi gato con una sombra de cuadro insertada que usa la propiedad blur de una box-shadow y el borde pixelado sigue siendo el mismo alrededor del ojo.

La respuesta aquí resuelve lo que vi con mi imagen de Búho, pero no de lo que se trata esta respuesta.

Aquí está el gato con una inset box-shadow mientras usa el tercer valor, blur .

recuadro de caja-sombra


He probado este violín en Safari, Chrome y Firefox y parece que todos lo muestran de la misma manera.

Tengo dos ojos en el gato de Cheshire que comencé a hacer ayer de CSS. Todo funciona muy bien y también hice un búho ( primero pensé que esta era una situación similar pero NO ) de CSS que tiene un problema muy pequeño pero similar en los ojos que se pixelan en los bordes.

También traté de dar a los ojos un borde del color púrpura, pero el borde pixelado permaneció igual en el borde del borde.

En mi nueva creación CSS, el borde exterior de los ojos está muy pixelado y parece ser el color (amarillo) del círculo principal.

Aquí está el CSS para los ojos.

 .eye { border-radius: 50%; height: 100px; width: 100px; background: #FAD73F; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; position: relative; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; } .pup { border-radius: 50%; height: 20px; width: 20px; background: #2b2b2b; display: block; position: absolute; top: 40px; left: 40px; } .lidT { display: block; width: 100px; height: 100px; background: #821067; position: absolute; top: -80px; z-index: 20; } .lidB { display: block; width: 100px; height: 100px; background: #821067; position: absolute; bottom: -80px; z-index: 20; } 

Debajo está el jsfiddle que utilicé para hacer esta animación / criatura.

JSFIDDLE

Creo que el problema está siendo causado por …

Creo que la raíz del problema está siendo causada por las clases .lidT y .lidB que he contenido dentro de mi .eye .

Parece cortar los párpados en 1px alrededor del borde. Intenta hacer parpadear los ojos en el violín para ver a qué me refiero.

Las imágenes tampoco están fuera de discusión, pero me gustaría seguir creando una imagen CSS por primera vez por razones de aprendizaje.

Lista de estilos que no ayudan

  1. box-shadow

  2. border

  3. box-sizing

  4. No es solo un error de Firefox

Lista final

Actualizaciones

Una solución alternativa es agregar un ocular o una etiqueta externa principal al ojo. Esto oculta la pixelación pero es solo una solución al problema.

Vea la respuesta de apaul34208 para más detalles

Aquí está el problema con la respuesta apaul34208,

la respuesta de apaul

Vea cómo el lado izquierdo y el superior del ojo están planos, me gustaría saber si mi pregunta es un problema o css del navegador .

Actualizaciones finales

La mejor opción a partir del 13/11/2013

Usar un degradado de fondo en el .eye parece ser la solución más limpia hasta ahora. Consulte la respuesta de Scott.

Esto también funciona en Firefox, Chrome, Safari e IE. (Un pequeño problema en IE es mucho mejor que antes)

Cualquier y toda ayuda es muy apreciada!

Usando gradiente de fondo

Esto no requiere marcado HTML adicional . Lo probé en Firefox (y está confirmado que funciona también en Safari y Chrome, ver comentarios). Hace que el fondo del ojo tenga el color púrpura a cierta distancia desde el borde, y luego el amarillo con un degradado de fondo radial para el color. Esto parece evitar la “combinación” (y el amarilleo) que se ve a lo largo del borde donde intenta “esconderse” según el border-radius del border-radius y el overflow: hidden combinación overflow: hidden .

Aquí está el ejemplo original de solución / violín con 1px de púrpura. Sin embargo, con la sombra paralela eliminada, aún puede detectar levemente una decoloración . Así que actualicé la respuesta a continuación con un borde morado de 2 2px ancho, que este gato parpadeante con sombra eliminada muestra que no se está produciendo ninguna decoloración .

Aquí está el código (actualizado a 2px ):

 .eye { border-radius: 50%; height: 100px; width: 100px; background: #fad73f; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #fad73f 0, #fad73f 48px, #821067 49px); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,#fad73f), color(48px,#fad73f), color-stop(49px,#821067)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #fad73f 0,#fad73f 48px,#821067 49px); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #fad73f 0,#fad73f 48px,#821067 49px); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #fad73f 0,#fad73f 48px,#821067 49px); /* IE10+ */ background: radial-gradient(ellipse at center, #fad73f 0,#fad73f 48px,#821067 49px); /* W3C */ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; position: relative; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; } 

Creo que puedo tener una solución a tu problema. Básicamente, solo necesita agregar cuencas para los ojos y ocultar el desbordamiento en las cuencas de los ojos en lugar de los ojos.

Ejemplo de trabajo

        .socket { border-radius: 50%; height: 102px; width: 102px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; position: relative; top: -1px; left: -1px; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; } .eye { border-radius: 50%; height: 100px; width: 100px; background: #FAD73F; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; top: 1px; left: 1px; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; } 

Creo que la pixelación que estás percibiendo es el resultado de la box-shadow y no del border-radius o overflow .

El navegador está tratando de dibujar una línea de 1px #2b2b2b en la parte superior interior del círculo. Esta línea se verá designada porque está en una ruta curva y debe aparecer como 1px de ancho.

Intente configurar el blur (o tercer valor) para la propiedad box-shadow .

Antes y después de:

Owl eyes antes y después

Mire la diferencia entre los dos

s redondeados en esta demostración de jsFiddle .

demostración de trabajo está aquí: jsFiddle

pon el contenido del .eye en otro contenedor como este:

  

eliminar overflow:hidden de. .eye . El nuevo estilo .eye está aquí:

 .eye { border-radius: 50%; height: 100px; width: 100px; background: #FAD73F; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; overflow: visible; /* change is here */ } 

cambie el ancho de .lidT y .lidB a 105px luego agregue este estilo para #eyeCover :

 #eyeCover{ width: 102px; height: 102px; top:-1px; left:-1px; border-radius: 50%; overflow: hidden; position: relative; } 

demostración de trabajo está aquí: jsFiddle

Ver esta respuesta: stackoverflow.com/questions/6001281/firefox-border-color-border-radius-and-background-color-creates-ragged-edges-a#6001374

y esta otra respuesta ya aceptada: Sangrado del radio de la frontera

Intente recortar su fondo:

 .your-element { -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } 

Después de pensar, es un comportamiento normal “difuminar” el píxel del borde. El navegador está intentando hacer algo básicamente cuadrado a algo redondo. De alguna manera, el píxel “intermedio” se verá borroso, al igual que una selección de Photoshop.

Una demostración con fotoshojas del píxel borroso. FRONTERA RADIOFRECUENCIA

Tristemente, tendrás que usar una imagen de fondo , una imagen-archivo real.png.

Por mi parte, intenté reformar tus marcas con un contenedor externo para aplicar el radio del borde. El usuario Mosher lo hizo genial, ver el jsfiddle de su respuesta .