css - 带圆边和渐变边框的按钮

Question

我没有使用 CSS 中的标准方法，是否有更正确的语义方法和更多的跨浏览器来解决此类问题？

问题:许多代码。使用属性::after (我认为这是多余的)。该按钮具有固定大小。

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  background: #050B1F;
}

#button-continue {
  margin-top: 46px;
  
  width: 331px;
  height: 54px;
  border: 3px solid transparent;
  border-radius: 56px;
  background-color: rgba(11, 27, 55, 1);
  position:relative;
  cursor:pointer;
  
}

#button-continue::after {
content: "";
width:337px;
height:60px;
position:absolute;
z-index:-5;
top:-6px;
left:-6px;

border-radius: 56px;
 background-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px);
}
.button-continue__text {
  text-transform: uppercase;
  font-size: 0.875em;
  color: #99CEFF;
  font-weight: 400;
}
.button-continue__text::after {
  content: url('img/icon-continue.svg');
  position: relative;
  top: 3px;
  left: 10px;
}

<button id="button-continue">
   <span class="button-continue__text">Continue</span>
</button>

Answer 1

我找到了 this example在线。

通过使用它，您可以避免使用伪元素。但是我发现的问题是创建的 border-image不会围绕 border-radius flex .所以这可能不是您要找的。

使用纯色边框可以，但背景图像不适用于圆形边框。所以你所做的可能就是这样做的方式。

为了完整起见，我将只包含我的代码，但请注意。

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: #050B1F;
}

#button-continue {
  margin-top: 46px;
  width: 331px;
  height: 54px;
  border-width: 3px;
  border-style: solid;
  border-radius: 56px;
  border-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px) 1 round;
  background-color: rgba(11, 27, 55, 1);
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.button-continue__text {
  text-transform: uppercase;
  font-size: 0.875em;
  color: #99CEFF;
  font-weight: 400;
}

<button id="button-continue">
   <span class="button-continue__text">Continue</span>
</button>