使用CSS實現圓角漸層邊框-css教學-PHP中文網

首頁

web前端

css教學

使用CSS實現圓角漸層邊框

青灯夜游

Jan 27, 2021 pm 07:29 PM

css圓角

使用CSS實現圓角漸層邊框

CSS如何實現圓角的漸層邊框？以下這篇文章為大家介紹一下使用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;

#得到下列結果：

使用CSS實現圓角漸層邊框

#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. Alside, the area outso the curve of the border edge does not accept mouse events on behalf of the element.

為此，我們得另闢蹊徑或稍加改進，得到帶圓角的漸變邊框。

使用CSS實現圓角漸層邊框

法一：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;
}

使用CSS實現圓角漸層邊框

因为用到了 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;
}

效果如下：

使用CSS實現圓角漸層邊框

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

法四：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) 。