Question

enter image description here

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body {
    width: 100%;
    height: 100%;
    background: black no-repeat center top;
    background-size: 100% 100%;
    overflow: hidden;
}
#parent {
    width: 30%;
    height: 40%;
    border: 1px solid red;
}
#parent div {
    width: 50%;
    height: 50%;
    float: left;
}

 <div id="parent">
        <div style="border-right: 1px solid rgba(101,198,231,1);border-bottom: 1px solid rgba(101,198,231,0.2);"></div>
        <div style="border-bottom: 1px solid rgba(101,198,231,0.2);"></div>
        <div style="border-right: 1px solid rgba(101,198,231,1);"></div>
        <div></div>
</div>

如图所示，有两条重叠的边界线，其中一条的透明度为0.2，这会导致边界的重叠部分出现间隙。我想知道如何消除重叠部分中出现的间隙

Answer 1

如果我正确理解了您的问题，请告诉我这是否是您需要的？如果您希望边框保持一致，则需要对所有properties应用box。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
html,body {
    width: 100%;
    height: 100%;
    background: black no-repeat center top;
    background-size: 100% ;
    overflow: hidden;
}
#parent {
  margin:5px;
    width: 30%;
    height: 40%;
    border: 1px solid red;
}
#parent div {
    width: 50%;
    height: 50%;
    float: left;     
}
#first{
  border-right: 1px solid rgba(101,198,231,0.2);
  border-bottom: 1px solid rgba(101,198,231,0.2);
}
#second, #fourth {
   border-bottom: 1px solid rgba(101,198,231,0.2);
 
}
#third{
   border-right: 1px solid rgba(101,198,231,0.2);
}

 <div id="parent">
        <div id="first" ></div>
        <div id="second"></div>
        <div id="third"></div>
        <div id="fourth"></div>
</div>

UPDATE-1

我真的不确定gap在哪里，请在下面的代码段中进行检查，我已经删除了外部边框并增加了边框以便清楚地看到。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
html,body {
    width: 100%;
    height: 100%;
    background: black no-repeat center top;
    background-size: 100% ;
    overflow: hidden;
}
#parent {
    width: 100%;
    height: 100%;
    border: 0px solid red;
}
#parent div {
    width: 50%;
    height: 50%;
    float: left;     
}
#first{
  border-right: 10px solid rgba(101,198,231,0.2);
  border-bottom: 10px solid rgba(101,198,231,0.2);
}
#second {
  border-bottom: 10px solid rgba(101,198,231,0.2);
  
}
#third{
   border-right: 10px solid rgba(101,198,231,0.2);
 
}

 <div id="parent">
        <div id="first" ></div>
        <div id="second"></div>
        <div id="third"></div>
        <div id="fourth"></div>
</div>

边框重叠时如何消除间隙

1 个答案: