漸變邊框文字效果？CSS 輕松拿捏！

天，有個(gè)群友問了我這么一個(gè)問題，如果不想切圖，是否有辦法實(shí)現(xiàn)帶漸變邊框的字體效果？如下所示：

本文，就將嘗試一下，在 CSS 中，我們可以如何盡可能的實(shí)現(xiàn)這種漸變邊框字體效果。

元素疊加

首先，比較容易想到的寫法是通過元素疊加實(shí)現(xiàn)。

元素本身實(shí)現(xiàn)文字效果本身
通過元素的偽元素，配合 background-clip: text 實(shí)現(xiàn)漸變文字，并且通過 transform 或者設(shè)置大幾號的文字，實(shí)現(xiàn)漸變字體
將（1）（2）進(jìn)行疊加

我們嘗試一下這種方式：

<div data-text="4"></div>

div {
    position: relative;
    width: 300px;
    height: 150px;
    font-size: 100px;
    text-align: center;
    font-weight: bold;

    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        color: #000;
    }
    
    &::before {
        transform: scale(1.1);
        background: linear-gradient(cyan, #fc0);
        background-clip: text;
        color: transparent;
    }
}

這里，我們讓 before 偽元素和 after 偽元素兩個(gè)偽元素進(jìn)行具體內(nèi)容的展示，after 偽元素只展示具體的文字，字號為 100px，而before 偽元素放大一點(diǎn)點(diǎn)后疊加在另外一個(gè)偽元素下面，效果如下：

可以看到，這種方式，邊框并不均勻。

而且，如果字?jǐn)?shù)更多，效果更差：

所以，通過疊加實(shí)現(xiàn)，顯然不可取。

通過 SVG feMorphology 濾鏡實(shí)現(xiàn)

我們借助了 SVG 濾鏡能夠?qū)崿F(xiàn)對元素的腐蝕（變薄）或擴(kuò)張（加粗）。

看看原理，feMorphology 為形態(tài)濾鏡，它的輸入源通常是圖形的 alpha 通道，用來它的兩個(gè)操作可以使源圖形腐蝕（變?。┗驍U(kuò)張（加粗）。

使用屬性 operator 確定是要腐蝕效果還是擴(kuò)張效果。使用屬性 radius 表示效果的程度，可以理解為筆觸的大小。

operator：erode 腐蝕模式，dilate 為擴(kuò)張模式，默認(rèn)為 erode
radius：筆觸的大小，接受一個(gè)數(shù)字，表示該模式下的效果程度，默認(rèn)為 0

我們將這個(gè)濾鏡簡單的應(yīng)用到文字上看看效果：

<div class="g-text">
    <p>Normal Text</p>
    <p class="dilate">Normal Text</p>
    <p class="erode">Normal Text</p>
</div>

<svg width="0" height="0">
    <filter id="dilate">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="3"></feMorphology>
    </filter>
    <filter id="erode">
        <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"></feMorphology>
    </filter>
</svg>

p {
    font-size: 64px;
}
.dilate {
    filter: url(#dilate);
}
.erode {
    filter: url(#erode);
}

效果如下：最左邊的是正常文字，中間的是擴(kuò)張的模式，右邊的是腐蝕模式，看看效果，非常好理解：

如果能理解到這一點(diǎn)，我們可以嘗試：

利用 background-clip: text 實(shí)現(xiàn)漸變文字
利用 SVG feMorphology 的腐蝕模式，實(shí)現(xiàn)被細(xì)化的文字
將兩者疊加起來

代碼如下：

<div data-text="123/678"></div>
<div data-text="123/678"></div>
<div data-text="123/678"></div>
<svg width="0" height="0">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="2"></feMorphology>
        <feFlood flood-color="#fff" flood-opacity="1" result="flood"></feFlood>
        <feComposite in="flood" in2="ERODE" operator="in" result="OUTLINE"></feComposite>
        <feMerge>
            <feMergeNode in="OUTLINE" />
        </feMerge>
    </filter>
</svg>


div {
    position: relative;
    width: 100vw;
    height: 150px;
    font-size: 120px;
    font-weight: bold;
    text-align: center;
    
    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
    }
    &::before {
        color: transparent;
        background: linear-gradient(0deg, #da00ff, #2a79b7, #7e3eff);
        background-clip: text;
    }
    &::after {
        filter: url(#outline);
    }
}
div:nth-child(2) {
    font-family: 'Cherry Bomb One', cursive;
    font-size: 90px;
}
div:nth-child(3) {
    font-family: 'Darumadrop One', cursive;
    font-size: 150px;
}

基于此，看看效果，這里我嘗試了 3 種不同的字體：

看著還是挺不錯(cuò)的，利用 SVG 能夠使源圖形腐蝕（變?。┗驍U(kuò)張（加粗）的能力，我們巧妙的實(shí)現(xiàn)了文字的漸變邊框效果。

文字邊框 -webkit-text-stroke

結(jié)束了嗎？還沒有。一開始我就有想過使用 -webkit-text-stroke 來實(shí)現(xiàn)。

但是轉(zhuǎn)念一想，認(rèn)為 -webkit-text-stroke 無法實(shí)現(xiàn)漸變邊框，并且它需要使用 -webkit- 前綴，可能會(huì)存在兼容問題，結(jié)果在討論的過程中，牛逼的群友給出了使用 -webkit-text-stroke 實(shí)現(xiàn)的方式：

<div class="wrapper">
  <span class="text" data-text="1234567890"></span>
  <span class="text" data-text="我能吞下玻璃而不傷身體"></span>
</div>

.wrapper {
  position: relative;
  font-size: 128px;
  
  --stroke-width: 12px;
  --background-gradient: linear-gradient(red 0%, green 100%);
  --text-gradient: linear-gradient(white 0%, cyan 100%);
}

.text {
  position: relative;
}
.text::before,
.text::after {
  content: attr(data-text);
  display: block;
  background-clip: text;
  color: transparent;
}
.text::before {
  position: absolute;
  inset: 0;
  background-image: var(--background-gradient);
  -webkit-text-stroke: var(--stroke-width);
}
.text::after {
  position: relative;
  z-index: 1;
  background-image: var(--text-gradient);
}

原來，-webkit-text-stroke 的邊框顏色，可以支持直接設(shè)置漸變色，如此一來，我們就得到非常完美的效果：

并且，從 CanIUse - text-stroke，到今天，-webkit-text-stroke 的兼容性已經(jīng)非常好了：

我們完全可以放心使用 -webkit-text-stroke 設(shè)置文字的各種類型邊框效果。

最后

簡單總結(jié)一下，綜上所述，其實(shí) -webkit-text-stroke 是最簡單最便捷的實(shí)現(xiàn)漸變文字邊框的方式。當(dāng)然，SVG 方法也有其優(yōu)勢，如果需要多重邊框效果，甚至是多重漸變文字邊框效果，此時(shí)，SVG 會(huì)更為強(qiáng)大。

好了，本文到此結(jié)束，希望本文對你有所幫助 :)

鏈接：https://juejin.cn/post/7363220159505694747

180個(gè)漸變顏色取了自己的顏色名字也是讓我腦洞大開。

效果圖

你經(jīng)常為你的UI尋找好看的背景漸變嗎？
一個(gè)集合180種免費(fèi)的線性漸變網(wǎng)站，可在任何網(wǎng)站使用您不僅可以復(fù)制漸變的原生CSS顏色代碼，還可以查看下載每個(gè)優(yōu)質(zhì)的漸變圖片。

鏈接：http://color.oulu.me

復(fù)制CSS

放大全屏查看漸變效果

收錄 180 個(gè)線性漸變背景免費(fèi)集合的網(wǎng)站，你可以從這里挑選網(wǎng)站背景，利用產(chǎn)生的 CSS 語法將它快速套用到你網(wǎng)站的任何部分。讓使用者能直接點(diǎn)擊后預(yù)覽背景效果，一鍵產(chǎn)生 CSS 語法或下載 PNG 圖片格式。

大圖

主頁截圖

：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

之前《CSS之圖片特殊用法》有講過不同用途的image屬性，漸變作為image的屬性值參與以上用途。下面主要講一講漸變的實(shí)際用法。

一線性漸變（linear-gradient)

1 使用direction控制漸變方向

語法：

background-image: linear-gradient(to direction, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...);

解釋說明：

to direction表示的是漸變的方向，可以省略不寫，若省略，則默認(rèn)從上到下；direction可以是單個(gè)方向參數(shù)如top/bottom/left/right，也可以是兩個(gè)方向參數(shù)如bottom right，其表示從左上角到右下角漸變。
后面color參數(shù)至少有兩個(gè)。
length參數(shù)表示當(dāng)前顏色中心線位置，百分比percentage參數(shù)也表示當(dāng)前顏色中心線的位置，可以省略，若省略則按照下圖規(guī)則。

以上圖為例，五種顏色將空間均分成四等份，其中五條分割線為各自顏色的中心線，以此為基準(zhǔn)顏色漸變。

下面給出幾個(gè)具體案例

/*方向缺省，百分比缺省，漸變從上到下，五種顏色按規(guī)則漸變*/
background-image: linear-gradient(red, yellow,blue,orange,black);
/*從左到右，按照百分比漸變*/
background-image: linear-gradient(to right, red 10%, yellow 30%,blue 70%,orange 90%,black);
/*從左上到右下，按照具體像素漸變*/
background-image: linear-gradient(to bottom right, red 10px, yellow 150px,blue 170px,orange 200px,black);

2 使用angle控制漸變方向

語法：

background-image: linear-gradient(angle, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...);

與上述（使用direction控制漸變方向）漸變方式唯一的區(qū)別就是該方法是使用角度（angle）控制方向，下圖可以看出其漸變規(guī)則。當(dāng)角度為0deg時(shí)，漸變方向從下到上；當(dāng)角度是90deg時(shí)，漸變方向從左到右。

二徑向漸變（radial-gradient)

徑向漸變由中心向外進(jìn)行顏色漸變。

語法

background-image: radial-gradient(size shape, color-1 percentage-1/length-1, color-2 percentage-2/length-2, ...);

解釋說明：

size參數(shù)定義漸變的大小，值可以是closest-side | farthest-side | closest-corner | farthest-corner | <length>。<length>可以去取單值，表示漸變形狀為圓形（circle）且漸變半徑為該值；也可以取雙值，表示漸變形狀為橢圓（ellipse）且其值依次為漸變的橫軸半徑和縱軸半徑。該值也可以缺省，其默認(rèn)值與shape有關(guān)，當(dāng)shape為circle時(shí)，其默認(rèn)值為farthest-corner；當(dāng)shape為ellipse時(shí)，其默認(rèn)值與容器尺寸相關(guān)，其橫軸半徑為容器寬的一半，縱軸半徑為容器高的一半。
shape參數(shù)定義漸變的形狀，值可以是circe | ellipse。該值也可以缺省，默認(rèn)值為ellipse。
漸變中心點(diǎn)的位置可以自定義，語法為circle at 20px 50px或者ellipse at 20% 50%

三重復(fù)漸變（repeating-linear-gradient或者repeating-radial-gradient)

語法

/*重復(fù)線性漸變*/
background-image: repeating-linear-gradient(to direction, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...); 
/*重復(fù)徑向漸變*/
background-image: repeating-radial-gradient(size shape, color-1 percentage-1/length-1, color-2 percentage-2/length-2, ...);

解釋說明：

只需加repeating-即可變成重復(fù)漸變，其他參數(shù)沒有變化。
最后一種顏色后必須加percentage/length參數(shù)，且其小于容器尺寸，否則沒有重復(fù)漸變。

四邊框漸變

上面以背景為例講述了漸變的分類及實(shí)現(xiàn)，下面簡單擴(kuò)展一下，講一講邊框的漸變，之前寫過一篇文章《CSS之圖片特殊用法》，里面有講到將圖片作為邊框的背景，漸變神色與上述情況類似，只需要將圖片地址改為漸變色就可以了，示例代碼如下

border-image: linear-gradient( blue ,green ,yellow ,black) 10;

五字體顏色漸變

同樣由《CSS之圖片特殊用法》可以延伸，要是字體顏色漸變，只需要將背景圖改為漸變色就可以了，具體代碼如下：

background-image:radial-gradient( blue 10px,green 20px,yellow ,black); 
background-clip: text;
-webkit-background-clip: text; /*兼容chrome*/
color: transparent;

注：background-clip有兼容性問題，此需要根據(jù)瀏覽器不同使用不同的代碼；text屬性值目前是實(shí)驗(yàn)性值，且其在ie中無效，不建議在生產(chǎn)環(huán)境中使用。

在線咨詢

上一篇：位操作運(yùn)算有什么奇技淫巧？(附源碼)
下一篇：有趣的網(wǎng)站精選大全合集

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

漸變邊框文字效果？CSS 輕松拿捏！

元素疊加

通過 SVG feMorphology 濾鏡實(shí)現(xiàn)

文字邊框 -webkit-text-stroke

最后

鏈接：http://color.oulu.me

一 線性漸變（linear-gradient)

二 徑向漸變（radial-gradient)

三 重復(fù)漸變（repeating-linear-gradient或者repeating-radial-gradient)

四 邊框漸變

五 字體顏色漸變

您的項(xiàng)目需求

漸變邊框文字效果？CSS 輕松拿捏！

一線性漸變（linear-gradient)

二徑向漸變（radial-gradient)

三重復(fù)漸變（repeating-linear-gradient或者repeating-radial-gradient)

四邊框漸變

五字體顏色漸變