css 怎么绘制一个带圆角的渐变色的边框

在CSS中，您可以使用border-radius属性来创建圆角，并使用linear-gradient函数来创建渐变色的边框。以下是一个示例代码：

.gradient-border {
  border: 2px solid transparent;
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  border-radius: 10px; /* 圆角的大小 */
  padding: 10px;
  width: 200px;
  text-align: center;
}
 
.gradient-border::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  border-radius: inherit;
  z-index: -1;
}

HTML部分：

<div class="gradient-border">带圆角的渐变色边框</div>

这段代码定义了一个带圆角的渐变色边框，其中.gradient-border类用于设置边框的圆角和渐变背景，而.gradient-border::after伪元素用于创建一个完全相同的渐变边框效果，并且通过border-radius: inherit;继承了圆角。这种方法避免了双边框问题，并且可以很好地处理圆角。