CSS를 사용하여 둥근 그라데이션 테두리 구현

🎜🎜하지만 더 이상 소개는 하지 마세요 border-image의 구문을 스스로 이해해야 합니다. 🎜🎜

div {
    width: 200px;
    height: 100px;
    border: solid 10px transparent;
    border-radius: 10px;
    background-image: linear-gradient(#fee, #fee),
        linear-gradient(to right, green, gold);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

<div class="border-image-overflow"></div>

🎜🎜상자의 배경은 테두리 이미지가 아닌 적절한 곡선으로 잘립니다('Background-clip'에 의해 결정됨). 테두리나 패딩 가장자리에 클립되는 다른 효과(예: '표시' 이외의 '오버플로')도 곡선에 클립되어야 합니다. 또한 교체된 요소의 콘텐츠는 항상 콘텐츠 가장자리 곡선에 맞게 잘립니다. 테두리 가장자리는 요소를 대신하여 마우스 이벤트를 허용하지 않습니다.🎜🎜

CodePen Demo -- bg + overflow 实现渐变边框 

缺点

这个方案有两个问题，第一个是多使用了两个元素(当然在这里是 ::before 和 ::after)，其次最致命的是，如果要求边框內的背景是透明的，此方案便行不通了。

法二，使用 background-clip 实现

第二种方法，使用 background-clip: content-box 以及 background-clip: border-box 配合使用。

background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。它的部分取值和 box-sizing 类似。其中，

• background-clip: border-box 表示设置的背景 background-image 将延伸至边框
• background-clip: content-box 表示设置的背景 background-image 被裁剪至内容区（content box）外沿

这里，我们使用设置两个 background-image，设置两个 background-clip ，并且将 border 设置为透明即可：

核心 CSS：

div {
    width: 200px;
    height: 100px;
    border: solid 10px transparent;
    border-radius: 10px;
    background-image: linear-gradient(#fee, #fee),
        linear-gradient(to right, green, gold);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

因为用到了 background-clip: border-box，所以还需要 background-origin: border-box 使图案完整显示，可以尝试下关掉这个属性，即可明白为什么需要这样做。

CodePen Demo -- background-clip 实现渐变边框

缺点

与第一种方法类似，如果要求边框內的背景是透明的，此方案便行不通了。

法三：border-image + overflow: hidden

这个方法也很好理解，既然设置了 background-image 的元素的 border-radius 失效。那么，我们只需要给它加一个父容器，父容器设置 overflow: hidden + border-radius 即可：

<div class="border-image-overflow"></div>

.border-image-pesudo {
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
}
 
.border-image-pesudo::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
}

效果如下：

当然，这里还是多借助了一个元素实现。还有一种方法，可以不使用多余元素实现：

法四：border-image + clip-path

设置了 background-image 的元素的 border-radius 失效。但是在 CSS 中，还有其它方法可以产生带圆角的容器，那就是借助 clip-path。

[clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)，一个非常有意思的 CSS 属性。

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。

简而言之，这里，我们只需要在 border-image 的基础上，再利用 clip-path 裁剪出一个带圆角的矩形容器即可：

<div class="border-image-clip-path"></div>

.border-image-clip-path {
    position: relative;
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
}

解释一下：clip-path: inset(0 round 10px) 。

• clip-path: inset() 是矩形裁剪
• inset() 的用法有多种，在这里 inset(0 round 10px) 可以理解为，实现一个父容器大小（完全贴合，垂直水平居中于父容器）且 border-radius: 10px 的容器，将这个元素之外的所有东西裁剪掉（即不可见）。

非常完美，效果如下：

当然，还可以利用 filter: hue-rotate()顺手再加个渐变动画：

你可以在我 CSS-Inspiration 看到这个例子：

CSS-Inspiration -- 使用 clip-path 和 border-image 实现圆角渐变边框

更多编程相关知识，请访问：编程视频！！