Question

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

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

我希望它们是圆圈，所以我添加了border-radius：50％; 之后我发现他们的边界不再匹配了

为什么？

Answer 1

我想你正在尝试<Text> <Text>Where for art </Text> <Text style={{ fontweight : 600}}>thou</Text> <Text>mr. </Text> <Text style={{fontweight: 600}}>fancypants</Text> </Text>圈子 - 当我删除了match元素的border时注意到这一点

＆＃13;

last

＆＃13;

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;*/
}

＆＃13;

我想这与CSS渲染像素的方式有关（因为像素是离散单位）

Answer 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>

您可以使用边框大小增加/减少＆amp;更改圆圈边框更多

边框大小与圆圈不匹配

2 个答案: