html - オーバーフローのある CSS サークルの周りのピクセル化されたエッジ: hidden;

Question

これは、問題をできるだけ明確に示すために、私の猫/アニメーションのJSFIDDLEです drop-shadows。私の理解では、これは が原因でありborder-radius、おそらく が原因overflow: hidden;です。

---

フクロウはこの質問の内容ではなく、私がいた同様の状況の例にすぎません。

これは私の猫のJSFIDDLEblurで、 a のプロパティを使用したインセット ボックス シャドウbox-shadowがあり、目の周りのピクセル化されたエッジは同じままです。

ここでの回答は、フクロウの画像で見たものを解決しますが、この回答の内容については解決しません。

inset box-shadowこれは、3 番目の値 を使用する while を持つ猫blurです。

---

このフィドルを Safari、Chrome、および Firefox でテストしたところ、すべて同じように表示されるようです。

昨日から CSS で作り始めたチェシャ猫には 2 つの目があります。すべてが非常にうまくレンダリングされ、CSS からフクロウを作成しました(最初はこれが似たような状況だと思っていましたが、そうではありません)。これは、縁の周りで目がピクセル化されているという非常にマイナーですが同様の問題があります。

また、目に紫色の境界線を付けようとしましたが、ピクセル化されたエッジは境界線の端で同じままでした.

私の新しい CSS 作成では、目の外側の端が非常にピクセル化されており、親円の色 (黄色) のように見えます。

これが目のCSSです。

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

以下は、このアニメーション/クリーチャーを作成するために使用した jsfiddle です。

JSFIDDLE

問題の原因は...

.lidT問題の根本は、 の中に含まれているおよび.lidBクラスによって引き起こされていると思い.eyeます。

1pxまぶたを縁のあたりで切り落としているようです。フィドルで目をまばたきさせて、私の言いたいことを確認してみてください。

画像も問題外ではありませんが、学習上の理由から最初に CSS 画像を作成することに固執したいと思います。

役に立たないスタイルのリスト

1. box-shadow

2. border

3. box-sizing

4. Firefox だけのバグではない

エンドリスト

アップデート

回避策は、アイ ソケットまたは外側のメイン タグをアイに追加することです。これによりピクセル化が隠されますが、問題の回避策に過ぎません。

詳細については、apaul34208 の回答を参照してください。

ここに apaul34208 の回答の問題があります。

目の左側と上部がどのように平らであるかを確認してください。私の質問がブラウザの問題なのか、それとも css なのかを知りたいです。

更新の終了

2013 年 11 月 13 日現在の最良の選択肢

で背景グラデーションを使用する.eyeことは、これまでのところ最もクリーンなソリューションのようです。ScottSの回答を参照してください。

これは、Firefox、Chrome、Safari、および IE でも機能します。(IE bu の少しラフは以前よりずっと良くなっています)

どんな助けでも大歓迎です！

Answer 1

背景グラデーションの使用

これには、余分な html マークアップは必要ありません。Firefox でテストしました (Safari と Chrome でも動作することが確認されています。コメントを参照してください)。目の背景をエッジから少し離れた紫の色にし、色の放射状の背景グラデーションを使用して残りの部分を黄色にします。border-radiusこれにより、とのoverflow: hidden組み合わせに基づいて「隠蔽」しようとしているエッジに沿って見られる「ブレンド」(および黄変) が回避されるようです。

1pxこれは、紫色の元のソリューション/フィドルの例です。ただし、ドロップ シャドウを削除しても、わずかに変色が見られます。そこで、下の回答を2px広い紫色の境界線に更新しました。ドロップ シャドウが削除されたウィンクしているこの猫は、変色が発生していないことを示しています。

（に更新された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;
}

Answer 2

あなたが知覚しているピクセレーションは、またはbox-shadowではなく の結果であると思います。border-radiusoverflow

1px #2b2b2bブラウザは、円の内側上部に線を引こうとしています。1pxこの線は、カーブしたパス上にあり、幅に合わせて表示する必要があるため、ギザギザに見えます。

プロパティのblur(または 3 番目の値) を設定してみてください。box-shadow

前後：

<div/>このjsFiddle demoで、2 つの丸められた s の違いを見てください。

Answer 3

この回答を参照してください：stackoverflow.com/questions/6001281/firefox-border-color-border-radius-and-background-color-creates-ragged-edges-a#6001374

そして、この他のすでに受け入れられている答え：境界半径の出血

背景をクリッピングしてみてください:

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

考えた後、エッジ ピクセルを「ぼかす」のは正常な動作です。ブラウザは、基本的に正方形のものを丸いものにしようとしています。どういうわけか、フォトショップの選択と同じように、「中間」ピクセルがぼやけます。

ぼやけたピクセルのフォトショップ デモンストレーション。

残念ながら、実際の image-file.png である background-image を使用する必要があります。

私の側では、境界半径を適用するために外側のコンテナでマークアップを改革しようとしました。ユーザー Mosher は素晴らしいことをしました。彼の回答の jsfiddleを参照してください。

Answer 4

実際のデモはこちら: jsFiddle

.eye次のように、コンテンツを別のコンテナに入れます。

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

から削除overflow:hiddenし.eyeます。新しい.eyeスタイルはこちら:

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

.lidTと.lidBwidth を変更してから105px、このスタイルを に追加し#eyeCoverます。

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

実際のデモはこちら: jsFiddle