父母的绝对孩子不正确填写父母背景

我想创建自定义标签组件，我有CSS /渲染问题。父母的绝对孩子不正确填写父母背景

这里是链接到jsBIN：https://gist.github.com/FluksikartonGOD/351d649d4876059f88fd7bc63abfa8e0

正如你可以看到有地方圆角半径应用非常少红。如何解决这个问题？

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一个链接，您可以编辑和查看整个代码它 –

删除溢出：隐藏解决那个问题。 –

查找下面，我已经使用的box-shadow边境我的答案。因为边界与半径不太平滑。如果您还想使用阴影，请用分隔逗号的方式在box-shadow中添加另一个值。

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

父母的绝对孩子不正确填写父母背景

回答

相关问题