Bord pixélisé autour d’un cercle CSS avec débordement: masqué;

Question

Voici le JSFIDDLE de mon chat/animation sans drop-shadows pour montrer le problème aussi clairement que je le peux. Ma compréhension de ce qui est causé par l' border-radius et peut-être en raison d' overflow: hidden;.

---

La chouette n'est pas ce que cette question est à propos , juste un exemple d'une situation similaire, j'ai été dans. Le jsfiddle/cat est ce que cette question est à propos, désolé pour le mélange jusqu'!

Voici un JSFIDDLE pour mon chat avec un encart de zone d'ombre à l'aide de l' blur de la propriété d'un box-shadow et la pixélisé bord est toujours le même, autour de l'œil.

La réponse ici n'résoudre ce que j'ai vu avec mon Chouette image, mais pas pour ce que cette réponse est d'environ.

Voici le chat avec un inset box-shadow alors que l'utilisation de la troisième valeur, blur.

---

J'ai testé ce violon dans Safari, Chrome et Firefox, et ils semblent tous pour afficher la même.

J'ai deux yeux sur le Chat de Cheshire que j'ai commencé à faire hier dans le CSS. Le tout rend très bien et j'en ai également fait une Chouette(j'ai d'abord pensé que c'était une situation similaire, mais il n'est PAS) de CSS qui a une très mineur encore problème similaire sur les yeux pixélisé sur les 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 CSS création du bord extérieur de l'œil est très pixélisé et semblent être de la couleur(jaune) de la société mère de cercle.

Voici le CSS pour les yeux.

.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 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é par l' .lidT et .lidB classes, j'ai contenue à l'intérieur de mon .eye.

Il semble couper les paupières par 1px autour du bord de celui-ci. Essayez de faire les yeux cligner des yeux en coulisse pour voir ce que je veux dire.

Par ailleurs, les Images ne sont pas hors de question, mais je voudrais coller avec la prise d'un CSS de l'image d'abord pour une raison d'apprentissage.

Liste des styles, ce qui n'aide pas

1. box-shadow

2. border

3. box-sizing

4. Pas un seul bug de Firefox

Fin De La Liste

Les mises à jour

Un travail autour est l'ajout d'une orbite de l'œil ou à l'extérieur de la balise principale à l'œil. Ce masque la pixellisation, mais est uniquement une solution de contournement du problème.

Voir apaul34208 réponse pour plus de détails

Là est 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 que de 11/13/2013

À l'aide d'un dégradé d'arrière-plan sur l' .eye semble être la solution la plus propre jusqu'à présent. Reportez-vous à ScottS réponse.

Cela fait également travailler dans Firefox, Chrome, Safari et IE. (Un peu ruff dans IE bu beaucoup mieux avant)

Toute aide est grandement appréciée!

Answer 1

À L'Aide De Dégradé D'Arrière-Plan

Ceci nécessite pas de supplément de balisage html. Je l'ai testé sur Firefox et il est confirmé à travailler sur Safari et Chrome ainsi, voir les commentaires). Il fait le fond de l'œil, la couleur pourpre à une certaine distance du bord, puis le jaune, le reste à l'aide d'un radial gradient du fond pour la couleur. Cela semble éviter le "mélange" (et le jaunissement) vu le long du bord où il est de tenter de "cacher" basé sur l' border-radius et overflow: hidden combinaison.

Voici la solution originale/violon exemple avec 1px de pourpre. Avec l'ombre portée supprimé, cependant, vous pouvez toujours légèrement détecter une décoloration. J'ai donc mis à jour la réponse ci-dessous à un 2px large violet frontière, ce clin d'œil de chat avec ombre portée retiré montre qu'aucune décoloration se produit.

Voici les mises à jour de 2px) code:

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

Answer 2

Je crois que la pixelisation vous êtes à la perception est le résultat de l' box-shadow et pas l' border-radius ou overflow.

Le navigateur est d'essayer de dessiner un 1px #2b2b2b ligne sur le sommet intérieur du cercle. Cette ligne est lié à l'aspect déchiqueté puisque c'est sur un tracé incurvé et doit comparaître en tant que 1px en largeur.

Essayez de définir le blur (ou troisième valeur) pour l' box-shadow de la propriété.

Avant et après:

Coup d'oeil a la différence entre les deux arrondis <div/>s dans ce jsFiddle démo.

Answer 3

Je pense que je peux avoir une solution à votre problème. Fondamentalement, vous devez simplement ajouter des orbites et cacher le débordement sur les orbites plutôt que sur les yeux.

Exemple de travail

 <span class="socket">
  <span class="eye">
    <span class="lidT"></span>
    <span class="pup"></span>
    <span class="lidB"></span>
   </span>
</span>

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

Answer 4

travail de démonstration est ici: jsFiddle

mettre la .eye contenu dans un autre récipient comme ceci:

<span class="eye">
    <div id="eyeCover">
        <span class="lidT"></span>
        <span class="pup"></span>
        <span class="lidB"></span>
    </div>
</span>

retirez overflow:hidden de .eye. nouveau .eye style est ici:

.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  */
}

variation .lidT et .lidB de la largeur de 105px puis ajouter ce style pour #eyeCover:

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

travail de démonstration est ici: jsFiddle

Answer 5

Voir cette réponse : stackoverflow.com/questions/6001281/firefox-border-color-border-radius-and-background-color-creates-ragged-edges-a#6001374

et ce que d'autres ont déjà accepté de répondre : Border-radius saignement

Essayez de cliping votre arrière-plan :

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

Après réflexion, c'est un comportement normal de "blurr' le bord de pixel. Navigateur est de tenter de faire quelque chose de fondamentalement place à quelque chose de rond. En quelque sorte, les "entre-deux" pixel sera floue, tout comme photoshop sélection.

Un photoshoped démonstration de l'floue pixel.

Malheureusement, vous devrez utiliser une image de fond d'écran, une image réelle-fichier.png.

Pour ma part, j'ai essayé de réformer vos balises avec un outter conteneur à appliquer border-radius. L'utilisateur Mosher a une grande, voir sa réponse du jsfiddle.