Как сделать рендеринг линий более равномерным или более гладким для тонких линий? ⇐ CSS

[Anonymous]

Я совершенно новичок в кодировании, и я разработал страницу «минималистской» в качестве практического проекта с использованием фигмы и решил, что все строки будут иметь вес только 1,5px (я просто аппроксимирован на основе икон). Вы можете увидеть его здесь (все еще работа в процессе): https://leolice36.github.io/admindashboard/
Теперь моя проблема в том, что когда я начал кодировать страницу, я заметил что линии были настолько тонкими, что это странно. Из того, что я могу сделать вывод, это округление веса, отображаемого в зависимости от того, насколько он увеличен или его позиция. Проблема заключается в том, что каждая строка не «округла» одинаково для определенной настройки масштабирования, поэтому она выглядит неровной. Используемые SVG не ведут себя таким образом и масштабируются плавно. Из того, что я собрал SVG, и строки от границ или элементов Div, которые видят по -разному. Out. < /p>





Div & SVG Styling

.horizontal {
width: 100px; /* Adjust as needed */
height: 1.5px;
background-color: black;
}

.vertical {
width: 1.5px;
height: 100px; /* Adjust as needed */
background-color: black;
}

.box {
width: 100px;
height: 100px;
border: 1.5px solid black;
}




CSS Divs

SVG Versions


















< /code>
Есть ли способ сделать рендеринг «более плавным», как то, как это делает SVG? знать. Если есть более продвинутый метод, который я пока не могу подать заявку, я буду рад услышать его для будущей ссылки. < /P>
Я понятия не имею, как это исправить, но я думаю Моя теория «округление» верна, так как проблема не видна на мобильных устройствах, которая, как я предполагаю, из -за более высокой плотности пикселей и небольшого дисплея, поэтому эти линии «2PX» фактически используют гораздо больше пикселей, чем на более крупном дисплеи.

Подробнее здесь: https://stackoverflow.com/questions/793 ... thin-lines