边框大小与圆形不匹配答案

【问题标题】：border size not matching for circle边框大小与圆形不匹配
【发布时间】：2016-09-07 15:47:32
【问题描述】：

我有 2 个具有相同边框的 div；

div {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 6px solid transparent;
}

我希望它们是圆形，所以我添加了border-radius: 50%; 然后我发现它们的边界不再匹配了

这是为什么呢？

【问题讨论】：

Сan you make fiddle?
我在codepen中做了demo codepen.io/_massimo/pen/bwdgLk
这只是像素四舍五入的抗锯齿。它们大小相同，只是一个是黑色的，您可以看到它-codepen.io/Paulie-D/pen/kkWgQX
我故意把它弄成黑色，以显示青色更宽

标签： sass pug border geometry

【解决方案1】：

我猜你正在尝试match 圈子 - 当我删除 last 元素的 border 时注意到这一点

body {
  background: #000;
}
body div {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 6px solid transparent;
  border-radius: 50%;
}
body .first {
  border-color: cyan;
}
body .last {
  /*border-color: #000;*/
}

<div class="first"></div>
<div class="last"></div>

我猜这与 CSS 如何渲染像素有关（因为像素是离散单位）

【讨论】：

刚刚注意到 Paulie_D 的 cmets：由于像素舍入而产生的抗锯齿- 这一定是原因 :)
不，我需要这些边框（用于更复杂的事情）
我希望第二个 div 的边框完全覆盖第一个 div 的边框
你想要做的事情在 CSS 中是不可能的
我想要一个没有抗锯齿的效果。是否可以？？第二个边界完全覆盖第一个边界

【解决方案2】：

CSS

div#container{ 
padding-top:10px; 
padding-left: 10px;
background:#CF0; 
width:800px;
height:220px; 
} 

.box{ 
position:absolute;
width:200px; 
height:200px; 
font-size:150px;
border-radius:150px; 
border:6px dotted #0F9; 
    }

HTML

<div id="container">
<div class="box"><div>

您可以使用增加/减少边框大小等来更改圆形边框

【讨论】：