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

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

基礎樣式：

.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實現背景顏色漸變

css漸變色概念 css漸變色 gradients 能讓我們用一種顏色漸變的效果修飾乙個空間 從一種顏色過渡到另外一種顏色 填充這個空間。漸變色有兩個形式 linear 線性漸變 和radial 環形漸變 很顯然css漸變色 gradients 技術是產生了一種視覺圖案效果，而實現這種視覺效果很簡單...

CSS3顏色漸變

漸變帶來了色彩巨大的展現。可謂不可不學 是故收集整理，權當乙個小教程吧。一 線性漸變在mozilla下的應用 語法 moz linear gradient 引數 其共有三個引數，第乙個引數表示線性漸變的方向，top是從上到下 left是從左到右，如果定義成lefttop，那就是從左上角到右下角。第二...

CSS實現文字漸變

css實現文字顏色漸變 span font size 30px font weight bold background linear gradient to right,red,blue,yellow webkit background clip text color transparent 文字漸...