border-image和border-radius不兼容问题，非主流解决方法

border-image和border-radius不兼容问题，非主流解决方法

看了下大部分的解决方法都是这三种，1.使用两层元素；2.background-clip；3.clip-path，但都不适用于我或者对我的情况无效，于是根据自己之前实现某个UI的思路来解决这个问题吧。

之前实现这四个角是用到before和after伪元素

而我现在给元素添加了border-image实现渐变边框和border-radius后，效果是这样的（模拟了下当时的情况）：

解决

直接上代码。主要是运用到before和after伪元素和absolute定位。

.chatBox {
  background: #ffffff;
  background-image: linear-gradient(
    32deg,
    #ffffff80 0%,
    #ffffff29 54%,
    #1e90ff14 100%
  );
  border-radius: 16px;
  border: 1px solid #D3EAFF;
  border-image: linear-gradient(to bottom, rgba(211, 234, 255, 1), rgba(238, 238, 238, 1)) 1;

  &::before{
    position: absolute;
    content: "";
    top: 1px;
    left: 0px;
    border-top: 1px solid rgba(211, 234, 255, 1);
    width: 25px;
    height: 25px;
    border-radius: 10px;
    transform: rotate(-50deg);
  }
  .chatBox-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    &::before{
    position: absolute;
    content: "";
    bottom: 1px;
    left: 0px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    width: 25px;
    height: 25px;
    border-radius: 10px;
    transform: rotate(50deg);
  }
  &::after{
    position: absolute;
    content: "";
    bottom: 1px;
    right: 0px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    width: 25px;
    height: 25px;
    border-radius: 10px;
    transform: rotate(-50deg);
  }
  }

html的元素嵌套关系是这样的

<div class="chatBox">
	<div class="chatBox-footer"></div>
</div>