css border颜色渐变 但是border-radius不生效了

如果你使用CSS3中的 `border-image` 属性来实现边框颜色渐变，那么 `border-radius` 属性可能会不起作用。这是因为 `border-image` 属性中的图片会覆盖边框的圆角。

如果你希望 `border-radius` 属性能够生效，可以使用 `background-clip` 属性来限制背景的绘制区域。具体来说，将 `background-clip` 属性设置为 `padding-box`，这样背景只会绘制在内边距区域内，不会覆盖边框的圆角。

举个例子，以下是一个带有渐变边框和圆角的元素的 CSS 代码：

.border-gradient {
  border: none;
  background: linear-gradient(to right, #f00, #00f);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border-radius: 10px;
}

在这个例子中，我们使用了 `background` 属性来定义渐变背景，同时将 `border` 属性设置为 `none`，避免了边框的绘制。然后，我们使用 `-webkit-background-clip` 和 `background-clip` 属性将背景限制在内边距区域内。最后，我们使用 `border-radius` 属性定义了圆角。