请看一下这个 JSFiddle： https ://jsfiddle.net/a08vkmew/light/
我用 CSS/Html/Javascript 创建了一个指南针，它对页面上的水平鼠标移动做出反应。如果您缓慢移动鼠标，您会看到线条的宽度略有变化，从而导致指南针出现闪烁的外观。我认为当一条线与屏幕上的相应像素不完全匹配时会出现这种效果，因此只能显示线的一半宽度。在某些 GUI 框架中，我们可以选择将 GUI 显示为像素完美。在 CSS 中可能有这样的事情吗？
HTML
<div id="compass-container">
<div class="arrow down"></div>
<div class="arrow up"></div>
<div id="viewport">
<div id="compass-scale">
</div>
</div>
</div>
CSS
div#compass-container {
position:relative;
height: 6em;
}
div#viewport{
position:relative;
height:40%;
width:50%;
left:50%;
top:1.2em;
margin-left:-25%;
overflow: hidden;
}
div#compass-scale {
position:relative;
width: auto;
height: 100%;
}
.mini-container {
width:1em;
height:95%;
top:0em;
border: 0px solid black;
float:left;
}
.line {
position: relative;
left:45%;
width:.1em;
background-color:black;
}
.line.small {
height: 15%;
}
.line.medium {
height: 30%;
}
.line.big {
height: 45%;
}
.compass-text {
position:relative;
height:100%;
width:100%;
margin-top:.4em;
text-align: center;
font-family: sans-serif;
color:dodgerblue;
}
.compass-text.small {
font-size: .6em;
}
.compass-text.big {
font-size: .8em;
}
.arrow {
position:absolute;
width: 0;
height: 0;
left:50%;
}
.arrow.up {
margin-left:-1em;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 2em solid dodgerblue;
bottom: 0em;
}
.arrow.down {
margin-left:-0.5em;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 1em solid dodgerblue;
top: 0em;
}