CSS文字漸變效果
阿新 • • 發佈：2020-10-13
解法一：
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { background: linear-gradient(-45deg, red 33.3333%, pink 30%, pink 66.666%, yellow 60%); -webkit-background-clip: text; color: transparent; } </style> </head> <body> <span><b>這是文字文字</b></span> </body> </html>
結果：
說明：
解法二：
程式碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <style type="text/css"> h1{ position: relative; color:yellow; } h1:before{ content: attr(text); position: absolute; z-index: 10; color:pink; -webkit-mask:linear-gradient(to left, red, transparent ); } </style> </head> <body> <h1 text="這是文字文字">這是文字文字</h1> </body> </html>