Question

我在画圆线时遇到了麻烦。

我想有一条线也能适应div的高度，这是我到目前为止所尝试的：

<html>
  <body>
    <div class="item">
      <div class="item__level opacity-10">
        <div class="item__level__round"></div>
        <div class="item__level__line"></div>
      </div>
    </div>
  </body>
</html>

和CSS

.item{
  width: 100%;
  height: 40px;
}
    .item__level{
      width: 10%;
      position: relative;
      height: 100%;

    }

    .item__level__round{
      width: 20px;
      height: 20px;
      background: #1F8AEE;
      border-radius: 50%;
      position: absolute;
      transform: translateX(50%) translateY(50%);      
    }

    .item__level__line{
      position: absolute;
      border-left: 2px solid red;
      left: 12%;
      top: 0;
      height: 100%; 
    }

https://codepen.io/anon/pen/eQMdjm

似乎红线不在圆心中，这是错觉吗？我已经有一段时间了

Answer 1

更新-抱歉，我只是重新阅读了您的问题。是的，根据宽度，线可能会偏离一个像素。请查看此小提琴以获取示例https://jsfiddle.net/Hastig/pzo4fe2a/（红线为20px宽，蓝线为21px。它不会将像素切成两半，因此完整的1px差异显示在右侧（以FF为单位），而不是半像素如果您使用宽度和高度百分比，则由于无法控制设备的宽度，因此在响应式设计中可能会出现此问题。

原始答案-尝试在圆和直线上分别添加左：50％和前50％，并使用-50％进行补偿并使其居中。

File/Invalidate Caches / Restart

.container {
  display: relative;
  width: 100vw;
  height: 100vh;
}
.circle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: skyblue;
  border-radius: 100%;
}
.line {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2%;
  height: 100%;
  background-color: skyblue;
}

播放小提琴窗格以查看其对视屏尺寸的响应。

https://jsfiddle.net/Hastig/7d8ebqxm/

用圆画一条线

1 个答案: