Bord pixelisé autour d'un cercle CSS avec débordement: caché;

voici le JSFIDDLE de mon cat / animation sans aucun drop-shadows pour montrer le problème aussi clairement que je peux. À ma connaissance, cela est causé par le border-radius et peut-être dû à overflow: hidden; .

---

la chouette n'est pas le sujet de cette question , juste un exemple d'une situation similaire dans laquelle j'étais. Le jsfiddle/cat est ce que cette question est à propos, désolé pour le mélange!

voici un JSFIDDLE pour mon chat avec une ombre de boîte en médaillon en utilisant la propriété blur d'un box-shadow et le bord pixelisé est toujours le même autour de l'oeil.

la réponse ici résout ce que j'ai vu avec mon image de hibou mais pas pour ce que cette réponse est au sujet.

voici le chat avec un inset box-shadow en utilisant la troisième valeur, blur .

---

j'ai testé ce violon dans Safari, Chrome, et Firefox et ils semblent tous l'afficher le même.

j'ai deux yeux sur le chat Cheshire que j'ai commencé à faire hier à partir de CSS. Tout rend très bien et j'ai également fait un hibou ( j'ai d'abord pensé que c'était une situation similaire, mais il n'est pas ) de CSS qui a un problème très mineur mais similaire sur les yeux étant pixélisés autour des bords.

j'ai également essayé de donner les yeux d'une bordure de la couleur pourpre, mais la pixélisé bord est resté le même sur le bord de la frontière.

sur ma nouvelle création CSS le bord extérieur des yeux est très pixelisé et semble être la couleur(jaune) du cercle parent.

voici le CSS pour le oeil.

.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;
}

ci-dessous est le jsfiddle que j'ai utilisé pour faire cette animation/créature.

JSFIDDLE

je crois que le problème est causé par...

je pense que la racine du problème est causée par les classes .lidT et .lidB que j'ai contenues dans mon .eye .

il semble couper le les paupières par 1px autour du bord de celui-ci. Essayez de faire cligner les yeux dans le violon pour voir ce que je veux dire.

les Images ne sont pas non plus hors de question, mais je voudrais m'en tenir à faire une image CSS d'abord pour une raison d'apprentissage.

liste des styles qui n'aident pas

1. box-shadow

2. border

3. box-sizing

4. Pas uniquement pour Firefox bug

Fin De La Liste

Mises à jour

une modification consiste à ajouter à l'œil une Alvéole ou une étiquette extérieure principale. Cela cache la pixelisation mais n'est qu'un contournement du problème.

Voir apaul34208 réponse pour plus de détails

voici le problème avec apaul34208 réponse,

Voir comment la gauche et de la partie supérieure de l'œil est plat, j'aimerais savoir si ma question est un problème de navigateur ou css .

Fin Des Mises À Jour

meilleure option en date du 11/13/2013

utilisant un gradient de fond sur le .eye semble être la solution la plus propre jusqu'à présent. Reportez-vous à la réponse de ScottS.

cela fonctionne aussi dans Firefox, Chrome, Safari, et IE. (Un peu ruff dans IE bu beaucoup mieux avant)

Toute aide est grandement appréciée!