使用径向渐变时如何去除锯齿状边框

Question

我发现这个很好 button on CodePen 使用径向渐变动画反转具有波纹效果的按钮颜色。

我需要它有一个 28px 边框半径，但随后出现锯齿状边框，如图 here.

html {
  box-sizing: border-box;
  height: 100%;
  font-size: 10px;
}
 *, *::before, *::after {
  box-sizing: inherit;
}
 body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #57bd84;
}
 input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
 input[type=checkbox]:checked + label:after {
  transform: scale(4.2);
}
 label {
  outline: none;
  user-select: none;
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.04rem;
  padding: 1.5rem 3rem;
  cursor: pointer;
  border-radius: 28px;
  border: 0.3rem solid #000;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 0 0 #000;
}
 label::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  transition: transform 0.3s ease-in;
  mix-blend-mode: difference;
  background: radial-gradient(circle at center, #fff 24%, #000 25%, #000 100%);
}
 label:active {
  top: 3px;
  box-shadow: none;
}

<input type="checkbox" id="cb1" /><label for="cb1">Toggle me</label>

Answer 1

我会使用另一个伪元素来做不同的事情，我将在其中设置边框以避免这种不良影响。我还将用 background-size 效果

替换比例转换

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 10px;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #57bd84;
  margin:0;
}

input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  outline: none;
  user-select: none;
  color: #000;
  font-family: 'Lato', sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.04rem;
  padding: 1.5rem 3rem;
  cursor: pointer;
  border-radius: 28px;
  background: #fff;
  position: relative;
}
label::before,
label::after{
  content: '';
  position: absolute;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
label::after {
  border:3px solid #000;
  box-shadow:0 3px 0 0 #000;
}

label::before {
  mix-blend-mode: difference;
  background: 
   radial-gradient(circle at center, #fff 24%, #000 25%, #000 100%) 
   center/0% 0% no-repeat;
  transition: background-size 0.3s ease-in;
}

input[type=checkbox]:checked+label:before {
  background-size:400% 400%;
}

label:active {
  transform:translateY(3px);
}
label:active::after {
  box-shadow:0 0 0 0 #000;
}

<input type="checkbox" id="cb1" /><label for="cb1">Toggle me</label>

使用径向渐变时如何去除锯齿状边框

How to remove jagged border when using radial-gradient

css

radial-gradients