Круг с рамкой выглядит не круговым, зубчатым и негладным, почему?

Почему мой css-круг не является гладким?

Если я делаю HTML5 Canvas, это действительно приятно.


http://jsfiddle.net/nkBp8/

Использование Chrome и новейшего IE

Обратите внимание, что крайние верхние нижние правые левые точки выглядят плоскими.

3 ответа

Поскольку вы думаете, что используете 50%, но вы этого не сделали, вы использовали border-radius: 50px;, но это неправильно, вы используете border of 4px, который вы забыли добавить в размер окна вашего элемента (Если вы знаете, как действительно работает модель окна CSS).

Итак, вы должны использовать border-radius: 54px; вместо того, чтобы ваш общий элемент height и width суммировал до 108px подсчет границы на обеих сторонах.

Демо

Лучше использовать 50% в таких случаях

Демо

#circle {
 width: 100px;
 height: 100px;
 background: red;
 border-radius: 50%;
 border:4px solid blue;
}

Если вы хотите придерживаться измерения 50px, чем вы можете изменить рендеринг модели коробки с помощью box-sizing: border-box;

box-sizing: border-box;

Демо (измененная модель коробки)


Вы должны использовать граничный радиус в процентах, например:

-moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;


Для формы круга с использованием CSS вы должны указать ту же ширину, что и высота (как и вы), но вы всегда должны использовать 50% в радиусе границы. Это связано с тем, что при указании ширины и высоты он не будет включать ширину прокладки и ширины. Это означает, что по обе стороны от вашего div есть 4px границы, которая слегка растягивает ваш div.

Кроме того, вы можете удалить префиксы браузера, такие как -webkit- и -moz-. Chrome 4 и Firefox 3.6 последние версии нуждаются в этих префиксах и те, которые действительно отсутствует общий доступ к использованию браузера.

Ваш последний код будет выглядеть так:

#circle {
 width: 100px;
 height: 100px;
 background: red;
 border-radius: 50%;
 border:4px solid blue;
}

демонстрация

licensed under cc by-sa 3.0 with attribution.