1

特定の div に境界半径効果を適用しようとしています。私が使用したコードは次のとおりです。

/* Multiple compatibility with border radius */
/* CSS 3 */
border-radius: 50%;
/* Firefox versiones 3.x */
-moz-border-radius: 50%;
/* Safari desde 3.2 hasta la 4 */
-webkit-border-radius: 50%;
/* Khtml Conqueror */
-khtml-border-radius: 50%;

それで、円をシミュレートします:D! そこから、すべてがOKです。解像度に合わせてセリフを書いてみたのですが、今日、父のパソコンを使っていて発見がありました。

私は22インチの画面フルHDを使用しています。私の父は 17 インチのスクリーンを持っています。22 インチの画面でさまざまな解像度でデザインを試してみましたが、それらは正しかったです。しかし、17インチの父のモニターに行って自分のサイトを開いたとき、私の円は卵のように見えました! 私はそれがどうしてだろうと推測していました！22 インチのモニターでデザインを確認しましたが、800 x 600 から 1920 x 1080 までのすべてのモニターで、デザインが正しく表示されました。

もちろん、私はすぐにモニターの幅だと思いました。Web ページの配置に % を使用すると、円が卵のように見えます。しかし、この % を変更することでこの問題が解決され、別の問題が発生するかどうかはわかりません。

では、円を異なる画面インチの円のように見せるにはどうすればよいでしょうか??

ありがとうございました！

編集：

すべてを明確にするわけではないので、投稿を編集します。父の解像度: 1024 x 768。22 インチの画面で試してみたところ、完璧に見えました。しかし、17 インチのスクリーンに行くと、彼らは再び卵です! >_<

そして、ここに卵のスクリーンショットを貼り付けます。

卵！ 申し訳ありませんが、ツールバーなどで...

22インチの画面で円に見えることを確認しています...

編集

両方のプロパティを 16% に変更しました。次のようになります。

新しい卵！

そして今...私は少し迷っています。自分のコードをもう一度見てみようと思います...

4

2 に答える 2

3

アップデート

画像からあなたのウェブサイトのアドレスを取得しました。

ボックスの幅と高さをパーセンテージで設定しています。これは、含まれている要素の幅と高さのパーセンテージであるため、ブラウザーのサイズをさまざまな縦横比に変更するだけで、この問題を再現できます。

幅が 16% の場合、ブラウザーの幅を変更すると、円は広くなりますが、高さは変わりません (ブラウザーをそれ以上高くしていません)。

例えば

高さ: 100px、幅: 100px

  • 100px の 16% は 16px 幅
  • 100px の 8% は 8px 幅

ブラウザーを高さ 100px、幅 50px に縮小すると、円が表示されます。

  • 50px の 16% は 8px 幅
  • 100px の 8% は高さ 8px です

前の回答

画面の解像度が間違っている可能性があり、画面自体が引き伸ばされています。

画面に円のイメージを表示して、これをテストできます。丸くない場合は、CSS ではなくコンピューターの設定に問題があります。

円が正しく表示される場合は、ページのデモを参照するか、テストできるように HTML と CSS をもう少し提供していただけますか? これのもう 1 つの原因は、border-radius を追加する前のボックスのサイズが「正方形」ではないことです。

サークル

ウィキペディアの円の礼儀。

于 2012-06-14T15:01:04.627 に答える
2

あなたのコメントから判断すると、あなたの atm に何が起こっているかは次のとおりです: http://jsfiddle.net/7AN3R/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">

.mydiv {
    border:1px solid #000;
    width:8%;
    height:16%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
    }

    </style>
</head>
<body>
    <div style="width:800px;height:600px;">
    <div class="mydiv">


    </div>
    </div>
</body>
</html>

サークル div の幅と高さの両方に同じパーセンテージを使用するようにしてください。

お気に入り

.circle{
border:1px solid #000;
width:8%;
height:8%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
}
于 2012-06-14T15:02:27.320 に答える