부모의 절대 자식이 부모 배경을 올바르게 채우지 못함

사용자 지정 탭 구성 요소를 만들려고하는데 CSS/렌더링 문제가 있습니다. https://gist.github.com/FluksikartonGOD/351d649d4876059f88fd7bc63abfa8e0 부모의 절대 자식이 부모 배경을 올바르게 채우지 못함

을 사용하여 테두리 반경이 적용되는 아주 작은 빨간색이 볼 수 있듯이 : 여기

는 jsBIN에 대한 링크입니다. 어떻게 고칠 수 있니?

body { 
 
background-color: red; 
 
} 
 
.switch-container { 
 
    position: relative; 
 
    max-width: 300px; 
 
    height: 60px; 
 
    border: 2px solid white; 
 
    border-radius: 34px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
    margin: 0 auto 
 
} 
 
.switch-container span { 
 
    flex: 1; 
 
    height: 100%; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    z-index: 1; 
 
    user-select: none; 
 
    transition: all .2s ease-in; 
 
} 
 
.switch-container span.active { 
 
    color: blue 
 
} 
 
.switch-container span:hover { 
 
    cursor: pointer; 
 
} 
 
.switch-container:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    border-radius: 34px; 
 
    background-color: white; 
 
    will-change: transform; 
 
    transition: transform .2s ease-in; 
 
} 
 
.switch-container.left-side:before { 
 
    transform: translateX(0); 
 
} 
 
.switch-container.right-side:before { 
 
    transform: translateX(100%); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="switch-container"> 
 
       <span class="item flex-item text-center active" target="switchItem1">Something 1</span> 
 
       <span class="item flex-item text-center" target="switchItem2">Something 2</span> 
 
      </div> 
 
</body> 
 
</html>

출처

2017-10-13 Georgi Antonov

주 일부 실행 가능 코드 –

내가 거기 jsBin에 대한 링크가하고 편집하고 오버 플로우를 제거 –

의 전체 코드를 볼 수있는 링크 내부의 코드 공유 : 해결하기 위해 숨겨진를 그 문제. –

내가 테두리 상자 그림자를 사용하는 것처럼 아래에있는 내 대답을 찾을 수 있습니다. 국경이 반경이 너무 부드럽지 않기 때문입니다. 그림자를 사용하려면 쉼표로 구분 된 상자 그림자에 또 다른 값을 추가하십시오.

body { 
 
    background-color: red; 
 
} 
 

 
.switch-container { 
 
    position: relative; 
 
    max-width: 300px; 
 
    height: 60px; 
 
    box-shadow: 0 0 0 2px white inset; 
 
    border-radius: 34px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
    margin: 0 auto 
 
} 
 

 
.switch-container span { 
 
    flex: 1; 
 
    height: 100%; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    z-index: 1; 
 
    user-select: none; 
 
    transition: all .2s ease-in; 
 
} 
 

 
.switch-container span.active { 
 
    color: blue 
 
} 
 

 
.switch-container span:hover { 
 
    cursor: pointer; 
 
} 
 

 
.switch-container:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    border-radius: 34px; 
 
    background-color: white; 
 
    will-change: transform; 
 
    transition: transform .2s ease-in; 
 
} 
 

 
.switch-container.left-side:before { 
 
    transform: translateX(0); 
 
} 
 

 
.switch-container.right-side:before { 
 
    transform: translateX(100%); 
 
}

<div class="switch-container"> 
 
    <span class="item flex-item text-center active" target="switchItem1">Something 1</span> 
 
    <span class="item flex-item text-center" target="switchItem2">Something 2</span> 
 
</div>

출처

2017-10-13 09:23:33

부모의 절대 자식이 부모 배경을 올바르게 채우지 못함

답변

관련 문제