持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前言

最近呢，利用css写渐变边框，发现了这么一个问题，border-image设置了之后，再设置border-radius不生效.这样的话，UI走查过不了啊。那应该怎么解决呢？本次我们就聊一聊吧。

情景还原

先看一看设置了border-image之后的样子吧。

<div class="demo-box">
</div>

.demo-box {
    width: 200px;
    height: 240px;
    background-color: #fff;
    box-shadow: 0 70px 70px -70px rgb(255, 0, 0) inset;
    border-radius: 8px;
    border: 1px solid #000;
    border-image: linear-gradient(rgba(0, 228, 228, 1), rgba(243, 0, 243, 1)) 1 1;
}

注意看左上角与右上角，会出现边框未被圆角化的情况。那这种情况该怎么解决呢？

解决方法一

首先，我们来了解一下这个属性clip-path,它使用裁剪方式创建元素的可显示区域。什么意思呢？就比如这么一段代码：clip-path: inset(0 round 8px)就是说矩形裁剪出一个border-radius: 8px的容器，将这个容器之外的所有东西裁剪掉。

那这时，加上这一句代码之后，我们的div就变成了这样：

解决是解决了，但是没有完全解决。为什么呢？因为这种方法多半用与解决border比较宽的元素。就想这样的：

.demo-box {
    width: 200px;
    height: 240px;
    background-color: #fff;
    box-shadow: 0 70px 70px -70px rgb(255, 0, 0) inset;
    border-radius: 8px;
    border: 10px solid #000;
    border-image: linear-gradient(rgba(0, 228, 228, 1), rgba(243, 0, 243, 1)) 10 10;
    clip-path: inset(0 round 8px);
}

那这不太符合我们的要求啊。那就来看看万能的第二种方法。

解决方法二

使用伪元素来解决这个问题。伪元素怎么解决呢？大体思路是这样：

先用伪元素创建一个div，大小则看边框的大小。例如：边框为1px，width和height就比当前元素的width和height大2px
对伪元素设置渐变色的背景
绝对定位，top-1px，left-1px，其中，-1为边框的大小，当前元素开启相对定位
设置border-radiu，z-index: -1(比当前元素层级低就行)
记得删除当前元素的boeder哦

根据思路，那代码应该是这样的：

.demo-box {
    width: 200px;
    height: 240px;
    background-color: #fff;
    box-shadow: 0 70px 70px -70px rgb(255, 0, 0) inset;
    border-radius: 8px;
    position: relative;
}
.demo-box::after {
    content: '';
    width: 202px;
    height: 242px;
    position: absolute;
    border-radius: 8px;
    background: linear-gradient(rgba(0, 228, 228, 1), rgba(243, 0, 243, 1));
    top: -1px;
    left: -1px;
    z-index: -1;
}

那效果自然而然的，就是我们想要的样子：

当然，这里也可以用div什么的解决，但是会增加额外的页面结构，具体看个人喜好。

那么，本期分享就到这，bye～

解决border-image圆角属性不生效问题

前言

情景还原

解决方法一

解决方法二