Блог

У меня есть код CSS, который создает здесь простую пунктирную границу:

 border: 5px dotted #ff2100
  

Теперь проблема находится на самом верху, где эти две последние точки расположены слишком близко друг к другу…

Что, если я хочу равные пробелы между всеми точками… Пожалуйста, помогите…

Редактировать: мне это нужно только в Chrome, и вот весь CSS ( border: 5px dotted #ff2100 находится в самом конце …)

 html {
overflow: hidden; 
  width: 1470px;
  height: 450px;
  margin-top: -3px;
  margin-left: 5px;
}
.row {
  display: flex;
}

.column {
  flex: 50%;
}

.profile {
  padding: 0px;
  margin: 100px 70px 0px 0px;
  width: 50%;
  height: 25px;
  box-sizing: border-box;
  color:#161b7a;
}

.profile .name {

  margin-right: -260px;
  font-family: "Helvetica";
  font-weight: 600;
  src: url(helveticaneue-ultrathin.woff);
  float: right;
  width: 200px;
  height: 50px;
}

.profile .job {


  margin-right: -260px;
  margin-top: 25px;
  font-family: "Helvetica";
  font-weight: 100;
  font-size: 14px;
  color: #b69cd1;
  src: url(helveticaneue-ultrathin.woff);
  float: right;
  width: 200px;
  height: 50px;
}


.profile .count {
  float: right;
  margin-right: 60px;
  margin-top: -2px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  src: url(helveticaneue-ultrathin.woff);
  color: #E6E0EC;
  font-size: 21px;
  min-width: 76px;
}

.profile img.profilePic {
  position: absolute;
  margin: -50px 70px 50px 50px;
  background: #2f293d;
  border: 4px solid #2f293d;
  padding: 1px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.profile img.profileDia {
  position: absolute;
  margin: -7px 70px 50px 560px;
  width: 2.3%;
  height: auto;
}




.points {
  position: absolute;
  margin: -2px 100px 100px 490px;
  float: right;
  font-family: "Verdana";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #0047ba;
  font-size: 18px;
}

.level {
  position: absolute;
  margin: 25px 100px 100px 135px;
  float: right;
  font-family: "Helvetica";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #ed0909;
  font-size: 20px;

  display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: #2c094f;
    color: white;
    text-align: center;
    font-size: 1.3em;
}



.profile img.profilePic.custom-borderA {
   border: 5px dotted #ff2100

}
  

HTML

 <div class="row">
  <div class="column">
    <div class="profiles"></div>
  </div>
  <div class="column">
    <div class="profiles"></div>
  </div>
</div>

 <link rel="stylesheet" href="Style.css">
<script src="Script.js"></script>
  

Вы не можете исправить эту проблему с помощью чистого css здесь. Вы можете использовать фоновое изображение или изображение границы, которое делает трюк.

Одним из решений вашей проблемы было бы использование «Border-image». Используя это свойство css, вы можете применить изображение границы, а не прямую границу, и избавиться от проблемы смешивания точек. Для получения подробной информации вы можете обратиться к «https://css-tricks.com/almanac/properties/b/border-image /«.

Отказ от ответственности: это решение, похоже, работает только при некоторых обстоятельствах (ОС, версия Chrome и т. Д.). Используйте на свой страх и риск.

Что вам нужно сделать, так это округлить количество красных точек до целого числа.

Для изображения размером 150×150 окружность составляет 486,95 пикселей, что не может вместить целое число точек размером 5 пикселей. Одним из решений было бы использовать 4,9688 пикселей для ширины границы, но это не сработает; браузер округляет ширину границы до целого числа.
Поэтому нам придется прибегнуть к небольшой хитрости, чтобы сделать его подходящим. Мы увеличим изображение, придадим ему ширину границы в целых пикселях, а затем уменьшим все до исходного размера.

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

 .profile {
  width:160px; height:160px;
  overflow:hidden;
}
.profile img {
  vertical-align:top;
  background:#2F293D;
  /* multiply the size by 32 */
  width:calc(150px * 32); height:calc(150px * 32);
  border:calc((5px * 32) - 1px) dotted #FF2100;
  border-radius:50%;
  /* then scale back by the same factor */
  transform:scale(calc(1 / 32));
  transform-origin:0 0;
}  

 <div class="profile">
 <img src="https://i.stack.imgur.com/W2IqJ.jpg" alt="photo">
</div>  

Для сравнения, вот фрагмент без обмана, который демонстрирует неравномерное расположение точек.

 .profile {
  width:160px; height:160px;
  overflow:hidden;
}
.profile img {
  vertical-align:top;
  background:#2F293D;
  border:5px dotted #FF2100;
  border-radius:50%;
}  

 <div class="profile">
 <img src="https://i.stack.imgur.com/W2IqJ.jpg" alt="photo">
</div>  

Обратите внимание, что мне пришлось поместить контейнер вокруг изображения с помощью overflow:hidden , иначе браузер все равно посчитал бы, что изображение было таким же большим, как его width и height , и соответственно зарезервировал бы место.