web-dev-qa-db-ja.com

CSS-丸みを帯びた境界線がピクセル化されすぎているように見える

丸みを帯びた境界線を修正するために助けが必要です。それはとても醜いです。もっとスムーズにしたいのですが、どうしても直せないようです。何が間違っているのかわかりません。

これがその写真です：

enter image description here

これが私のHTMLです：

<div class="sidebar">
    <!-- User avatar/message/notification/settings buttons -->
    <div class="userpanel">
        <div class="userpanel-image">
            <img src="image.jpg">
        </div>
        <div class="userpanel-buttons">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span></a></li>
            </ul>
        </div>
    </div>
</div>

そしてこれが私のCSSです：

.sidebar > .userpanel > .userpanel-image img {
    border: 1px solid white;
    border-radius: 25px;
    margin: 3px;
    margin-right: 25px;
}
imagecssborderrounded-corners
11
Tibia Rook

あなたは間違いなく何も悪いことをしていません。

ボーダーが薄すぎるからかもしれません。 border: 1px solid white;を2px、3px、または好きなように変更してみてください。試してみてください。

6
Putri Dewi Purnamasari

これは最終的に、使用しているモニターの ピクセル密度 に依存します。

ピクセル/インチ（PPI）またはピクセル/センチメートル（PPCM）は、コンピューターモニターやテレビディスプレイなどの電子画像デバイス、またはカメラや画像スキャナーなどの画像デジタル化デバイスのピクセル密度（解像度）の測定値です。ほとんどのデバイスには正方形のピクセルがあるため、水平方向と垂直方向の密度は通常同じですが、正方形以外のピクセルを持つデバイスでは異なります。

たとえば、15インチ（38 cm）のディスプレイで、幅12インチ（30.48 cm）、高さ9インチ（22.86 cm）で、最大1024×768（またはXGA）ピクセルの解像度が可能で、約85を表示できます。 PPI水平方向と垂直方向の両方。この数値は、ピクセル単位の表示領域の幅（または高さ）をインチ単位の表示領域の幅（または高さ）で割ることによって決定されます。ディスプレイの水平方向と垂直方向の測定値が異なる可能性がありますPPI測定値（たとえば、最大サイズで1280×1024モードのコンピューターディスプレイを表示する一般的な4：3比のCRTモニター（5） ：4の比率、4：3とはまったく同じではありません。モニターの見かけのPPIは、画面の解像度（つまり、ピクセル数）と画面のサイズによって異なります。使用; 800×600モードのモニターは、1024×768または1280×960モードの同じモニターよりもPPI低いです。

ピクセル密度が高いモニターは、視覚的に曲線を滑らかにする傾向があります。

HTML/CSSなどを介してピクセル密度の表示を改善するために、一般的にできることは何もありません。あなたは単にあなたのモニターの品質で生きるか、それをアップグレードすることを学ぶ必要があります。

場合によっては、円と同じ色をわずかに1px box-shadow適用すると、モニターのアンチエイリアシングに役立ちます。しかし、それも100％成功しているわけではありません。

6
Scott

残念ながら、私は何度か同じ問題を抱えていました。これは100％解決できないレンダリングの問題かもしれないと思います。たぶん、「境界の問題」に使用した回避策を使用して、より鮮明に見せることができます（すべてのブラウザーでテストしたわけではないので、確認する必要があるかもしれません）

body {background:black;}

div {
  width:100px;
  height:100px;
  display:block;
  background:#fff;
  border-radius:100%;
  padding:2px;
}

img {
  display:block;
  border-radius:100%;
  display:block;
  width:100px;
  height:100px;
}
<div>
  <img src="https://unsplash.it/100" alt=""> 
</div>
3
BasySilver

通常、この問題に直面したときは、色のコントラストを下げて、ピクセル化されたアンチエイリアシングを容易にします（コメントで述べたように）。ただし、これは常にオプションであるとは限りません。あなたが直面している本当の問題は、ブラウザが完全なギザギザを防ぐために一定量のアンチエイリアシングを適用し、適用されるアンチエイリアシングの強度を実際に制御できないことです。これは、外観を制御するために使用できる代替手段です。ボックスシャドウを使用して、既存の境界線を補足または置換できます。

body {
  background: #223;
  padding-bottom: 25px;
  text-align: center;
  color: white;
}

div {
  margin-top: 25px;
}

img {
  display:inline-block;
  
  border-radius: 50%;
  border: 1px solid white;
  vertical-align: middle;
}

div + div img {
  box-shadow: 0 0 1px 0 white;
}

div + div + div img {
  box-shadow: 0 0 0 1px white;
  border: none;
}
<div>border only: <img src="//placehold.it/50/933/FFF"></div>
<div>border + box-shadow: <img src="//placehold.it/50/933/FFF">
<div>box-shadow only: <img src="//placehold.it/50/933/FFF">
3
Joseph Marikle

私にとってこれは最もよく見えます：

.userpanel-image {  
  width: 100px;
  height: 100px;
  border-radius: 100%;
  box-shadow: 0 0 1px 1px white;
  overflow: hidden;
}

.userpanel-image img {
  width: 98px;
  height: 98px;
}
0
nischtname