Question

我正在尝试对特定div应用 border-radius 效果。我使用的代码是：

/* 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！从那以后，everythig就可以了。我写了一些线条，所以它适合不同的分辨率，但今天我用父亲的电脑时发现了一些东西。

我使用22英寸全高清屏幕。我父亲有一个17英寸的屏幕。我在22英寸屏幕上尝试了不同分辨率的设计，它们是正确的。但当我去我17英寸的父亲的显示器并打开我的网站时，我的圈子看起来像一个鸡蛋！我猜怎么会这样！我用我的22英寸显示器确保了我的设计，并且所有设计都是从1920 x 1080的800 x 600开始，设计看起来正确。

当然，我立刻认为它应该是显示器的宽度。当我使用％来定位我的网页时，它会使圆圈看起来像鸡蛋。但是我不确定是否改变这个％会解决这个问题而产生一个问题因为我改变了它。

那么，我怎样才能让我的圆圈看起来像不同屏幕的圆圈？

谢谢！

编辑：

好的，我编辑帖子，因为它没有澄清一切。我父亲的分辨率：1024 x 768.我在我22英寸的屏幕上试过它看起来很完美。但当我进入17英寸屏幕时，它们又是蛋！＆GT; _＆LT;

在这里，我粘贴了鸡蛋的截图：

The eggs! 对不起，有工具栏等等......

我确保它们看起来像22英寸屏幕上的圆圈......

修改

我将两个属性都更改为16％。现在它看起来像这样：

New eggs!

现在......我有点迷失了。我想我可能会再次查看我的代码......

Answer 1

<强>更新

我抓住了你的website address from the image。

您将框的宽度和高度设置为百分比 - 这是包含元素的宽度和高度的百分比，因此您只需将浏览器调整为不同的宽高比即可重新创建此问题。 / p>

如果宽度为16％，并且您更改了浏览器的宽度，则圆圈将变宽但高度将保持不变（您还没有使浏览器更高）。

例如

高度：100px和宽度：100px

100px的16％是16px宽
100px的8％是8px宽

将浏览器压缩到100px高，50px宽，你就会得到圈子：

50px的16％是8px宽
100px的8％是8px高

上一个答案

可能是屏幕分辨率错误，导致屏幕本身被拉伸。

您可以通过在屏幕上查看圆圈图像来测试此项。如果它不是圆形，则问题出在计算机设置中，而不是在CSS中。

如果圆圈显示正确，您可以指向我们的页面演示或提供更多的HTML和CSS，以便我们测试一下吗？造成这种情况的另一个原因是盒子的大小不是“方形”。在添加border-radius之前。

Circle

Circle courtesy of Wikipedia

Answer 2

根据您的意见判断您发生的事情是：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%;
}

如何在不同的屏幕尺寸上调整border-radius

2 个答案: