当前位置: 主页>网站教程>CSS教程> 运用CSS实现圆角渐变边框

分享文章到：

运用CSS实现圆角渐变边框

发布时间：01/01 来源：未知浏览：关键词：

CSS怎样实现带圆角的渐变边框？下面本篇文章给大家介绍一下使用CSS奇妙实现带圆角的渐变边框的几种办法。有必然的参照价值，有需要的伴侣可以参照一下，但愿对大家有所帮忙。

怎样实现下面这个渐变的边框结果：

这个问题本身不难，实现的办法也有一些，主如果有一些细节需要留意。

border-image

border-image 是 CSS 标准 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方标准) 新增的一个属性值。

望文生义，我们可以给 border 元素增加 image，相似于 background-image，可以是图片也可以是渐变，不再局限于纯色。

使用 border-image 实现渐变边框

有了 border-image 之后，实现渐变边框变得很利便

不外多介绍 border-image 的语法，读者需要自行理解一下。

实现如下：

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

.border-image {
    width: 200px;
    height: 100px;
    border-radius: 10px;
    border-image-source: linear-gradient(45deg, gold, deeppink);
    border-image-slice: 1;
    border-image-repeat: stretch;
}

上面关于 border-image 的三个属性可以简写为 border-image: linear-gradient(45deg, gold, deeppink) 1;

得到如下结果：

border-radius 失效

细心看上面的 Demo，设定了 border-radius: 10px 但是实际展现没有圆角。使用 border-image 最大的问题在于，设定的 border-radius 会失效。

我们没法得到一个带圆角的渐变边框。缘由，查看官方标准 W3C 说明如下：

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

为此，我们得另辟蹊径或者稍加改善，得到带圆角的渐变边框。

法一：background-image + 伪元素

第一种办法，我们不再使用 border-image ，而是使用 background-image + 伪元素的方案，这也是在 border-image 标准没有显现最常用的办法。

非常简便，简便的示企图如下：

利用 background-image 实现一个渐变背景，再通过叠加一个白色背景使之构成一个渐变边框。

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) 。