Question

我正在尝试创建自定义标签组件，我有css / render问题。

以下是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>

Answer 1

在下面找到我的答案，因为我使用了box-shadow作为边框。因为边界不是那么光滑的半径。如果您还想使用阴影，请在逗号分隔的框阴影中添加另一个值。

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

父级中的绝对子级未正确填充父级背景

1 个答案: