画一条线穿过一个圆圈
画一条线穿过一个圆圈
提问于 2018-11-22 15:49:20
我在画一条穿过圆圈的线时遇到麻烦。
我想有一个线，也适应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
似乎红线不是完美地在圆心，它是一个视觉错觉吗？我有一段时间都在做这个
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-22 16:29:38
更新-对不起，我只是重读了你的问题。是的，这条线可以是一个像素，取决于宽度。检查这个小提琴的例子https://jsfiddle.net/Hastig/pzo4fe2a/ (红线是20 an宽，蓝线是21 an。它不会将一个像素减半，因此整个1px差值出现在右边(在FF中)，而不是左半像素和右下半像素。如果您正在执行百分比宽度和高度，则由于无法控制设备宽度，因此在响应设计中可能会出现此问题。
最初的答案-尝试添加左: 50%和顶部50%到你的圆和线，并使用-50%，以补偿和保持它的中心。
.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;
}<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>
播放小提琴窗格，以看到它响应视屏大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53434459
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号