Блог

Главная - Вопросы по программированию - Неравные круги с простым HTML и CSS

Неравные круги с простым HTML и CSS

#html #css

#HTML #css — код #css

Вопрос:

Я создал кучу кругов с помощью простого HTML и CSS, но мне кажется, что не все они равны. Честно говоря, некоторые из них для меня больше похожи на эллипсы. Что-то не так с моим зрением или есть какое-то ограничение Брауэра, о котором я не знаю?

Вот код, который я использовал для воспроизведения проблемы, а также изображение результата (для этого использовался Chrome).

 body {
  background-color: whitesmoke;
  box-sizing: border-box;
}

.circle {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 10px;
  border-radius: 7px;
  background-color: brown;
  transition: 150ms border linear;
  cursor: pointer;
}

.circle::after {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 12px;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle:hover::after {
  border-color: brown;
}  
 <div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

введите описание изображения здесь

Обновление: ни один из ответов на самом деле не решил проблему для меня. Проблема была связана с браузером, и я больше не могу ее воспроизвести.

Комментарии:

1. Если вы хотите, чтобы вместо этого были установлены идеальные круги border-radius: 50%;

2. @Brian это ничего не изменило для меня. Какой браузер вы используете?

3. он слишком мал, чтобы быть действительно существующим и видимым, для меня это похоже на оптическую иллюзию (и какой смысл иметь whitesmoke круг на whitesmoke заднем плане ?)

4. @MisterJojo для меня это довольно заметно в проекте, который я использовал.

5. сбросьте масштаб в браузере — ctrl 0 в chrome

Ответ №1:

Я изменил border-radius значение на 50%, и, похоже, это устранило проблему в Chrome.

 body {
  background-color: whitesmoke;
  box-sizing: border-box;
}

.circle1 {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 10px;
  border-radius: 7px;
  background-color: brown;
  transition: 150ms border linear;
  cursor: pointer;
}

.circle1::after {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 12px;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle1:hover::after {
  border-color: brown;
}
.circle2 {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 10px;
  border-radius: 50%;
  background-color: green;
  transition: 150ms border linear;
  cursor: pointer;
}

.circle2::after {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle2:hover::after {
  border-color: green;
}  
 Original:<br />
<div class="circle1"></div>
<div class="circle1"></div>
<div class="circle1"></div>
<div class="circle1"></div>
<div class="circle1"></div>
<br />
Fixed:<br />
<div class="circle2"></div>
<div class="circle2"></div>
<div class="circle2"></div>
<div class="circle2"></div>
<div class="circle2"></div>

Комментарии:

1. Ну, тогда это должно быть что-то, связанное с браузером, потому что это не решает проблему для меня.

2. Какой браузер вы используете?

3. Google Chrome v84.0.4147.125

4. Я нахожусь на chromebook, и на моем компьютере это выглядит как круг.

5. Выглядит нормально и в Firefox.

Ответ №2:

Вероятно, ваша проблема вызвана масштабированием браузера. Попробуйте сбросить настройку масштабирования ctrl 0 в Chrome.

Если вы хотите, чтобы ваш круг выглядел круглым даже при увеличении — вы можете использовать масштабирование. Обычно, чем больше отображаемый элемент, тем более гладким выглядит круг. Вы можете создать круг с удвоенным размером, а затем уменьшить его:

 body {
  background-color: whitesmoke;
  box-sizing: border-box;
}

.circle {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 10px;
  cursor: pointer;
}

.circle::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: brown;
  transform: scale(0.5);
  content: '';
}

.circle::after {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle:hover::after {
  border-color: brown;
}  
 <div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Ответ №3:

Существует очень полезный трюк для создания равных кругов и квадратов только с помощью CSS. Вы устанавливаете height: 0 и, устанавливая width и padding-bottom с теми же размерами, вы создаете квадрат, который также реагирует, если вы используете процент вместо пикселей. Чтобы создать круг, вы добавляете a border-radius: 100% и все готово.

 .circle {
  display: inline-block;
  width: 50px;
  padding-bottom: 50px;
  height: 0;
  border-radius: 100%;
  background-color: blue;
}

body {
  background-color: whitesmoke;
  box-sizing: border-box;
}

.circle {
  position: relative;
  display: inline-block;
  width: 14px;
  padding-bottom: 14px;
  height: 0;
  border-radius: 100%;
  margin: 10px;
  background-color: brown;
  transition: 150ms border linear;
  cursor: pointer;
}

.circle::after {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 12px;
  border: 1px solid whitesmoke;
  transition: 150ms all linear;
  content: '';
}

.circle:hover::after {
  border-color: brown;
}  
 <div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

<div class="circle">
</div>

Ответ №4:

Вероятно, это более простой и точный способ приблизиться к нему.

 .circle {
  background: brown;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-block;
  margin: 2rem;
  position: relative;
}
.circle::after {
  content: '';
  border: 3px solid brown;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}  
 <div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Ответ №5:

Я думаю, что это связано с браузером, но проблема едва заметна и при очень пристальном рассмотрении

 border-radius=50%;

должны выполнять работу