CSS3是最新的CSS標(biāo)準(zhǔn)，其中邊框線漸變是CSS3中很實(shí)用的特性。

.box {
border: 5px solid;
border-image: linear-gradient(to right, #F44336, #2196F3);
border-image-slice: 1;
}

上述代碼中，.box是一個(gè)樣式類選擇器，我們?cè)O(shè)置了一個(gè)5像素寬的實(shí)心邊框，通過border-image屬性實(shí)現(xiàn)了漸變效果，同時(shí)使用border-image-slice屬性對(duì)漸變進(jìn)行分割。

line-gradient是漸變色的一種，to right表示從左到右進(jìn)行漸變色的過渡，#F44336和#2196F3則是起始顏色和結(jié)束顏色。

border-image-slice屬性中的數(shù)字1表示不進(jìn)行分割，即整個(gè)邊框都應(yīng)用同樣的漸變效果。

帶想法的開發(fā)者還可以嘗試使用多線性漸變、徑向漸變等方式實(shí)現(xiàn)更豐富的邊框線漸變效果。