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弯曲。所以这可能不是您想要的。

可以使用单色边框，但是背景图像不能用于圆角边框。因此，您所做的可能就是做到这一点的方法。

为了完整起见，我将只包含我的代码，但要警告。

*,
*::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>

带有圆角和渐变边框的按钮

1 个答案: