设置border-radius后，然而border-image的样式没有radius了，怎么解决

当设置了`border-radius`属性后，`border-image`的样式确实不再具有圆角效果。这是因为`border-radius`属性只能应用于实际的边框，而不是边框图像。

要解决这个问题，你可以考虑以下两种方法：

1. 使用背景图像代替`border-image`：你可以创建一个带有圆角效果的背景图像，并将其应用于元素的背景。这样可以实现类似于`border-image`的效果，并且仍然保留了圆角。

2. 使用伪元素和盒子阴影：你可以使用伪元素（如`::before`或`::after`）来创建一个覆盖在元素上方的图层，并为该伪元素添加`box-shadow`属性来模拟边框的圆角效果。这样可以在不改变`border-image`的情况下实现圆角效果。

相关问题

如何实现view设置border-image后border-radius不失效

要实现`border-image`与`border-radius`同时生效，可以使用以下方法：

1. 将`border-image`属性应用于伪元素而不是实际的元素。通过这种方式，将`border-radius`应用于实际元素，同时将`border-image`应用于伪元素，从而实现两者同时生效。

.view {
  position: relative;
  border-radius: 20px;
}

.view::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: inherit;
  border-image: url(border-image.png) 30 round;
}

2. 使用`clip-path`属性来创建一个与视图形状相匹配的剪切路径，并将`border-image`应用于剪切路径而不是实际的边框。

.view {
  border-radius: 20px;
  clip-path: path('M0 20px H100% V100% H0 Z');
  -webkit-clip-path: path('M0 20px H100% V100% H0 Z');
  border-image: url(border-image.png) 30 round;
}

这两种方法都可以实现`border-image`和`border-radius`同时生效，可以根据具体需求选择适合的方法。

设置border-image后border-radius不起作用

根据引用\[1\]中的描述，当使用border-image属性设置边框图片后，border-radius属性无法生效。为了解决这个问题，可以尝试以下两种思路：

思路一：将边框切下来，然后使用background:url()插入作为背景图。这样可以绕过border-image属性的限制，同时可以使用border-radius属性来设置边框的圆角效果。

思路二：使用两个盒子，父盒子设置背景渐变色，并设置padding值，值为边框的大小。记得设置box-sizing:border-box来确保padding不会影响盒子的尺寸。然后再设置border-radius属性。子盒子的宽高设置为100%，背景色设置为原本的背景色，将父盒子的渐变色覆盖。最重要的是，border-radius的值要和父盒子保持一致。

以上是两种解决border-image后border-radius不起作用的思路。你可以根据具体情况选择其中一种来解决你的问题。
#### 引用[.reference_title]
- *1* *3* [css通过border-image设置渐变边框的时候，border-radius无效](https://blog.csdn.net/GongWei_/article/details/107733033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [关于css样式中border-radius和border-image不兼容问题](https://blog.csdn.net/qq_44853234/article/details/110988745)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]