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>