css - 如何实现精准的 CSS 渲染？

Question

我有一个原始样式的 div

display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 16px;
height: 16px;
box-sizing: border-box;
border: solid 1px #cfcfcf;

和:after它上面的伪元素

content: '';
display: flex;
width: 14px;
height: 14px;
background: #3fcaca;
border-radius: 50%;

但是这样的 div 在不同的屏幕区域看起来会有所不同。浏览器缩放为 100%

我正在使用 15 英寸全高清屏幕和窗口放大，这显然是原因。有没有办法通过一些 CSS 调整来解决这些问题？

Answer 1

如果您想将元素顶部的东西与:after(or before:) 对齐，请将父元素设置为，然后position: relative;将其设置:after为position: absolute;，然后调整top:, left:，以使元素对齐。

Answer 2

我找到了一个非常简单的答案：

只需替换border为box-shadow. 听起来不寻常，但 box-shadow 可以生成与边框完全相同的外观，同时看起来总是平滑的。即使在像素级屏幕上