组合 box-shadow 和 border-radius 时出现 CSS 故障

问题描述 投票：0回答：1

我尝试使用 CSS 和 HTML 创建一个切换按钮，问题是当我在 Chrome、Firefox 和 Safari 上组合 box-shadow 和 border-radius 属性时，边缘出现故障。

Example

请注意，在此代码片段中工作正常，但在 WordPress 页面上则不然。

/* CSS */
#model-4 .toggle {
    position: relative;
    box-sizing: border-box;
}
#model-4 .toggle input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}
#model-4 .toggle input[type=checkbox]:checked + label:before {
    box-shadow: inset 20px 0 0 #47B844;
    border: 2px solid #47B844;
}
#model-4 .toggle label {
    position: relative;
    display: flex;
    align-items: center;
}
#model-4 .toggle label:before {
    content: "";
    width: 40px;
    height: 20px;
    background: transparent;
    border: 2px solid #EDF8EC;
    box-shadow: inset -20px 0 0 #EDF8EC;
    position: relative;
    display: inline-block;
    transition: 0.25s ease-in-out;
    border-radius: 20px;
}
.sticky #model-4 .toggle label:before {
    background: #292B2C;
}


#bifaSomethingSomething {
    display: flex;
    color: #FFF;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    align-items: center;
}
#bifaSomethingSomething > section {
    margin: 0 0 0 8px;
}
<!-- HTML -->
<div id="bifaSomethingSomething">GO LOW<br>CARBON
   <section id="model-4">
      <div class="card">
         <div class="toggle">
            <input type="checkbox" id="check-4">
            <label for="check-4"></label>
         </div>
      </div>
   </section>
</div>

我尝试更改页面渲染或抗锯齿功能，但没有任何效果。在多个浏览器上进行了测试。

html css google-chrome dom
1个回答
0
投票

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    .switch-container {
      position: relative;
      width: 80px;
      height: 40px;
    }

    .switch {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      background-color: #3498db;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .slider {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ffffff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s;
    }

    input[type="checkbox"] {
      display: none;
    }

    input[type="checkbox"]:checked + .switch .slider {
      transform: translateX(40px);
    }

    input[type="checkbox"]:checked + .switch {
      background-color: #2ecc71;
    }
  </style>
</head>
<body>

  <div class="switch-container">
    <input type="checkbox" id="toggleSwitch">
    <label class="switch" for="toggleSwitch">
      <div class="slider"></div>
    </label>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const toggleSwitch = document.getElementById("toggleSwitch");

      toggleSwitch.addEventListener("change", function () {
        const switchContainer = document.querySelector(".switch");
        const slider = document.querySelector(".slider");

        if (toggleSwitch.checked) {
          switchContainer.style.backgroundColor = "#2ecc71";
          slider.style.transform = "translateX(40px)";
        } else {
          switchContainer.style.backgroundColor = "#3498db";
          slider.style.transform = "translateX(0)";
        }
      });
    });
  </script>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.