Как устранить пробелы, когда границы перекрываются

Question

введите описание изображения здесь

* {
    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>