web-dev-qa-db-fra.com

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

Voici le JSFIDDLE de mon chat/animation sans autredrop-shadows Pour montrer le problème aussi clairement que possible. À ma compréhension, cela est causé par le border-radius et éventuellement à cause de overflow: hidden;.

Le hibou n'est pas la question de cette question, juste un exemple de situation similaire que j'étais. Le jsfiddle/chat est ce que cette question est à peu près, désolé pour le mélange!

Voici un JSFIDDLE Pour mon chat avec une ombre de boîte intégrée à l'aide de la propriété blur de la propriété d'un box-shadow Et le bord pixelisé est toujours le même autour de l'œil.

La réponse ici consiste à résoudre ce que j'ai vu avec mon image de hibou, mais pas pour ce que cette réponse est à propos.

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

inset box-shadow

J'ai testé ce violon dans Safari, Chrome et Firefox et ils semblent tous l'afficher de la même manière.

J'ai deux yeux sur le Cheshire Cat que j'ai commencé à faire hier de CSS. Tout se rend très bien et j'ai aussi fait un hibo (- J'ai d'abord pensé que c'était une situation similaire, mais ce n'est pas) sur CSS qui a un problème très mineur et similaire sur les yeux étant pixelés autour des bords.

J'ai également essayé de donner aux yeux une bordure de la couleur violette, mais le bord pixelé est resté le même sur le bord de la frontière.

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

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

Vous trouverez ci-dessous la Jsfiddle, je faisais 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 le .lidT et .lidB classes que j'ai contenus à l'intérieur de mon .eye.

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

Les images ne sont pas non plus hors de la question, mais je voudrais prendre d'abord une image CSS pour une raison d'apprentissage.

Liste des styles qui n'aident pas

  1. box-shadow

  2. border

  3. box-sizing

  4. Pas un bug de firefox seulement

Liste de fin

mises à jour

Un travail autour consiste à ajouter une prise oculaire ou une étiquette principale extérieure à l'œil. Cela cache la pixélie mais n'est qu'une solution de contournement du problème.

Voir APAUL34208 Réponse pour plus de détails

Voici le problème avec APAUL34208 Réponse,

apaul's answer

Voyez à quel point le côté gauche et haut de l'œil est plat, J'aimerais aimer savoir si ma question est un problème de navigateur ou CSS.

fin mises à jour

meilleure option au 11/13/201

En utilisant un gradient de fond sur le .eye semble être la solution la plus propre jusqu'à présent. Se référer à Scotts Réponse.

Cela fonctionne également dans Firefox, Chrome, Safari et IE. (Un peu de ruff in IE be bu beaucoup mieux que avant)

Toute aide est grandement appréciée!

htmlcsscss-shapes
37
Josh Powell

Je pense que j'ai peut-être une solution à votre problème. Fondamentalement, vous devez simplement ajouter des prises oculaires et cacher le débordement des prises oculaires plutôt que 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;
}
6
apaul

Je crois que la pixelation que vous êtes percevante est le résultat de la box-shadow et pas le border-radius ou overflow.

Le navigateur tente de dessiner un 1px #2b2b2b Ligne sur le haut de l'intérieur du cercle. Cette ligne est liée à l'air déchiquetée car elle est sur un chemin incurvé et doit apparaître comme 1px en largeur.

Essayez de régler la blur (ou troisième valeur) pour le box-shadow Propriété.

Avant et après:

Owl eyes before and after

Regarde une différence entre les deux arrondis <div/>s dans la présente jsfiddle Demo .

6
Adam

Voir cette réponse: Stackoverflow.com/questions/6001281/firefox-border-color-border-radius-and-background-Color-Creats-Ragged-edges-A#6001374

et cette autre personne déjà acceptée Réponse: Saignement frontalier

Essayez de compter sur votre arrière-plan:

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

Après avoir pensé, c'est un comportement normal de "flou" du pixel de bord. Le navigateur tente de faire quelque chose d'essentiellement carré à quelque chose de tour. En quelque sorte, le pixel "entre-intermédiaire" sera flou, comme une sélection de photoshop.

une démonstration photoshopée du pixel flou.  BORDER-RADIUS BLUR

Malheureusement, , vous devrez utiliser une image de fond , un véritable image-fichier.png.

Pour ma part, j'ai essayé de réformer vos balises avec un conteneur étouffant pour appliquer le rayon de frontière. Mosher Mosher l'a fait super, voir Jsfiddle de sa réponse .

5
Milche Patern

La démo de travail est ici: (( jsfiddle

mettre le .eye Contenu dans l'autre conteneur comme celui-ci:

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

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

monnaie .lidT et .lidB largeur à 105px Ajoutez ensuite ce style pour #eyeCover:

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

La démo de travail est ici: (( jsfiddle

5
Mohsen Safari