테두리 반경이있는 테두리와 자식 요소 사이의 간격

Nov 27 2020

세그먼트 컨트롤처럼 작동하는 라디오 버튼을 구현하려고합니다.

* {
  margin: 0;
  padding: 0;
}

.container {
  background-color: brown;
  width: 80vw;
}

.box {
  display: flex;
  flex-direction: row;
  border: 2rem solid skyblue;
  border-radius: 999px;
}

label {
  flex: 1;
  padding: 2rem;
  border-radius: 999px;
  text-align: center;
}

input {
  display: none;
}

input:checked + label {
  background-color: skyblue;
}
<div class="container">
  <div class="box">
    <input type="radio" id="hello" name="test" checked />
    <label for="hello">Hello</label>
    
    <input type="radio" id="world" name="test" />
    <label for="world">World</label>
  </div>
</div>

그러나 중첩 레이블과 상위 div 사이에는 약 1px의 성가신 간격이 있습니다.

이 문제는 이 질문 과 비슷 하지만 제안 된 해결 방법은 배경색을 변경할 수 없기 때문에 내 사용 사례에 실제로 작동하지 않습니다. 또한 이것이 브라우저 버그인지 아니면 일종의 앤티 앨리어싱 문제인지 궁금합니다.

답변

2 ArhamChowdhury Nov 27 2020 at 13:23

입력에 상자 그림자를 추가하기 만하면됩니다.

input:checked + label {
    background-color: skyblue;
    box-shadow: 0px 0px 0 1px skyblue;
}

Jsfiddle에 연결

1 TanishSurana Nov 27 2020 at 12:42

1px 간격이 발생하는 이유를 모르겠지만 "transform : translateX (-1px);"를 추가 할 수 있습니다. 왼쪽으로 1px 이동합니다. 이것은 임시 솔루션으로 작동 할 수 있습니다.

  label {
    flex: 1;
    padding: 2rem;
    border-radius: 200px;
    text-align: center;
    transform: translateX(-1px);
  }
LaljiTadhani Nov 27 2020 at 12:57

변경 label border-radius 999px35px

label {
      flex: 1;
      padding: 2rem;
      border-radius: 35px;
      text-align: center;
    }

* {
  margin: 0;
  padding: 0;
}

.container {
  background-color: brown;
  width: 80vw;
}

.box {
  display: flex;
  flex-direction: row;
  border: 2rem solid skyblue;
  border-radius: 999px;
}

label {
  flex: 1;
  padding: 2rem;
  border-radius: 35px;
  text-align: center;
}

input {
  display: none;
}

input:checked + label {
  background-color: skyblue;
}
<div class="container">
  <div class="box">
    <input type="radio" id="hello" name="test" checked />
    <label for="hello">Hello</label>
    
    <input type="radio" id="world" name="test" />
    <label for="world">World</label>
  </div>
</div>