web-dev-qa-db-ja.com

オーバーフローのあるCSSサークルの周りのピクセル化されたエッジ：非表示。

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

フクロウは、この質問が何であるかではなく、私がいた同様の状況の単なる例です。jsfiddle/ catは、この質問が何であるかです。

これは [〜＃〜] jsfiddle [〜＃〜] であり、box-shadowのblurプロパティを使用して、ボックスシャドウを挿入した猫の場合、ピクセル化されたエッジは目の周りはまだ同じです。

ここでの答えは、私がフクロウの画像で見たものを解決しますが、この答えが何であるかについては解決しません。

これは、3番目の値blurを使用しているときにinset box-shadowを付けた猫です。

inset box-shadow

私はこのフィドルをSafari、Chrome、Firefoxでテストしましたが、すべて同じように表示されているようです。

私は Cheshire Cat に2つの目があります。昨日CSSから作り始めました。すべてが非常によくレンダリングされ、私は Owl （も作成しました。これは同様の状況だと最初に思いましたが、そうではありません）エッジの周りでピクセル化されている目に非常に小さなまだ似た問題がある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のみのバグではない

終了リスト

更新

回避策は、目のソケットまたは外側のメインタグを目に追加することです。これはピクセレーションを隠しますが、問題の回避策にすぎません。

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

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

apaul's answer

目の左側と上側がどのように平坦であるかを確認してください質問がブラウザーの問題かcssかを知りたいです。

更新の終了

2013年11月13日現在の最適なオプション

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

これは、Firefox、Chrome、Safari、IEでも機能します。 （IE buの少しラフは以前よりはるかに良い）

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

htmlcsscss-shapes
37
Josh Powell

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

これには、追加のHTMLマークアップは必要ありません。私はFirefoxでテストしました（SafariおよびChromeもコメントを参照）で動作することが確認されています）。これにより、目の背景がEdgeから少し離れた紫色になります。次に、色に放射状の背景グラデーションを使用して、残りの部分を黄色にします。これにより、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;
}
13
ScottS

私はあなたの問題の解決策があると思います。基本的には、眼窩を追加して、眼ではなく眼窩のオーバーフローを隠すだけです。

実施例

<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

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

ブラウザは、円の内側上部に1px #2b2b2b線を描画しようとしています。この線は曲線のパス上にあり、幅が1pxとして表示される必要があるため、ギザギザに見えるようにバインドされています。

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

前後：

Owl eyes before and after

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

6
Adam

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

そして、この他のすでに受け入れられている答え： Border-radius bleeding

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

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

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

ぼやけたピクセルのフォトショップによるデモ BORDER-RADIUS BLUR

悲しいことに、background-image、実際のimage-file.pngを使用する必要があります。

私の部分では、border-radiusを適用するために、外部コンテナーでマークアップを再構成しようとしました。ユーザーMosherは素晴らしいことをしました、 彼の答えのjsfiddle を参照してください。

5
Milche Patern

作業デモはこちらです：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と.lidBの幅を105pxに変更してから、このスタイルを#eyeCoverに追加します。

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

作業デモはこちらです：jsFiddle

5
Mohsen Safari