在網頁設計中,數字元素的排版與樣式缺少變化是十分無聊的。為了讓數字更具有吸引力,我們可以使用 CSS 漸變數字的技巧。
.gradient-text {
background: -webkit-linear-gradient(#C12424, #e65a5a); /*設置漸變背景色(webkit瀏覽器)*/
-webkit-background-clip: text; /*設置漸變作用于文字,不算文本框*/
-webkit-text-fill-color: transparent; /*填充背景色,顯示漸變色*/
}
在上面的代碼中,我們首先使用了background
屬性設置漸變背景色,其中-webkit-linear-gradient
指定使用漸變的類型,#C12424
與#e65a5a
是兩個顏色色值。
接下來,我們使用-webkit-background-clip
屬性來指定漸變效果作用于文字,即不算文本框的區(qū)域。同時,我們還需要使用-webkit-text-fill-color
填充背景色并顯示漸變色。
最后,我們只需將數字元素的標簽設置為這個 CSS 類,并根據需要修改背景色和漸變色即可。
上一篇css漸變整個頁面
下一篇css漸變由中向上下漸變