css文字顏色漸變的3種實現

2022-08-05 13:03:15 字數 839 閱讀 3792

基礎樣式:

.gradient-text
第一種方法,使用 background-cli、 text-fill-color:

.gradient-text-one
說明 :

background: -webkit-linear-gradient(...) 為文字元素提供漸變背景。

webkit-text-fill-color: transparent 使用透明顏色填充文字。

webkit-background-clip: text 用文字剪輯背景,用漸變背景作為顏色填充文字。

第二種方法,使用 mask-image:

.gradient-text-two

.gradient-text-two[data-content]::after

說明:

mask-image 和 background-image 一樣,不僅可以取值是 路徑,也可以是漸變色。

第三種方法,使用 lineargradient、fill:

.gradient-text-three
說明:

在svg中,有兩種主要的漸變型別:

線性漸變(lineargradient)

放射性漸變(radialgradient)

svg中的漸變不僅可以用於填充圖形元素,還可以填充文字元素

dom示例:

效果:

前端技術分享點選:加入

css3 文字的設定

1 text shadow 有3個length引數,第1個表示水平偏移,第2個表示垂直偏移,第3個表示模糊 可選 text11 2 webkit text stroke 描邊的文字 webkit text stroke 1px yellow 描邊為1px 3 box reflect 文字倒影 web...

CSS3學習筆記(3) 左右飛入的文字

前幾天看到一個企業招聘的動畫覺得很炫,裡面有個企業介紹的文字是用飛入的效果做出來的,今天嘗試了寫了一下,感覺還不錯 啦啦啦 下面來看我做的動...

CSS3下的漸變文字效果實現

background clip text fill color下的實現 如果您手頭上的瀏覽器是chrome或是safari,則您可以在dem...