柚子快報(bào)邀請(qǐng)碼778899分享：前端 css實(shí)現(xiàn)漸變色圓角邊框

Lazada南洋優(yōu)選鋪綜合2025-05-05400

http://yzkb.51969.com/

目標(biāo)

使用border-image可以設(shè)置漸變色邊框，但是當(dāng)它與border-radius組合使用時(shí)，兩者卻無(wú)法兼容。

因此，實(shí)現(xiàn)這個(gè)效果的另一個(gè)思路是：利用兩個(gè)圓角矩形的面積差形成邊框。故可以使用以下方法實(shí)現(xiàn)：

基礎(chǔ)版本

使用嵌套的兩個(gè)div，并設(shè)置父元素的內(nèi)邊距padding以此制造面積差，從而形成邊框的效果。

.border-box{

width: 200px;

background:linear-gradient(0deg,#00135A,#01A1FF);

border-radius: 5px;

padding: 2px;/* 邊框?qū)挾?*/

}

.border-content{

width: 200px;

height: 100px;

border-radius: 5px;

background-color: white;

}

簡(jiǎn)化HTML結(jié)構(gòu)版：使用偽元素

使用偽元素充當(dāng)背景也同樣可以達(dá)到上述效果，注意設(shè)置z-index將偽元素置于內(nèi)容之下

.border-content{

width: 200px;

height: 100px;

border-radius: 5px;

position: relative;

background-color: white;

}

.border-content::before{

content: '';

position: absolute;

top: -2px; right: -2px; bottom: -2px; left: -2px;/* 邊框?qū)挾?*/

border-radius: 5px;

background: linear-gradient(0deg,#00135A,#01A1FF);

z-index: -1;/* 置于內(nèi)容之下 */

}

進(jìn)階版：使用background相關(guān)屬性

給一個(gè)div設(shè)置兩個(gè)不同大小的背景，從而利用兩個(gè)背景制造面積差，也可以實(shí)現(xiàn)上述效果。

如何給div設(shè)置兩個(gè)背景？

使用background-image屬性設(shè)置兩組顏色，一組是內(nèi)容顏色，另一組是border邊框顏色，用逗號(hào)隔開(kāi)。

如何將兩個(gè)背景設(shè)置成不同大小？

可以使用background-clip 屬性，該屬性規(guī)定了背景的繪制區(qū)域。給一組設(shè)置為padding-box（背景繪制區(qū)域從內(nèi)邊距框開(kāi)始），第二組為border-box（背景繪制區(qū)域延伸至邊框）。

此時(shí)的效果如下：

可以看出背景色并不是我們想要的效果，原因是這兩組的繪制起點(diǎn)都是padding-box。

如何更改背景繪制區(qū)域的起點(diǎn)？

使用background-origin屬性，該屬性規(guī)定了背景的繪制區(qū)域相對(duì)于什么位置來(lái)定位。給一組設(shè)置為padding-box（背景繪制區(qū)域以 padding 區(qū)域?yàn)閰⒖迹?，第二組為border-box（背景繪制區(qū)域以 border 區(qū)域?yàn)閰⒖迹?/p>

此時(shí)即可得到想要的效果，代碼如下：

.border-content{

width: 200px;

height: 100px;

border: 2px solid transparent;

border-radius: 5px;

background-clip: padding-box,border-box;

background-origin: padding-box,border-box;

background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);

}

缺陷

該思路無(wú)法實(shí)現(xiàn)透明底的漸變色圓角邊框。