編碼的世界 / 優質文選 / 生涯
CSS3 實現文字漸變色
2022年3月30日
-
直接上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 60px;
background-image: linear-gradient(135deg,red,blue);
background-clip:text;
-webkit-background-clip:text;
color: transparent;
}
</style>
</head>
<body>
<p>
我是漸變文字
</p>
</body>
</html>效果如圖：
核心內容說明：background-image屬性：設置背景圖片為線性漸變色，了解更多css3漸變內容點擊這裏background-clip 屬性：規定背景的繪制區域。(我們注意到該屬性上的-webkit-，說明該屬性還存在兼容問題，並不是所有瀏覽器都支持，在W3C是沒有text這個值的，這裏的text是背景被裁剪到文字)
color屬性: 設置文字顏色為透明，然後面的背景色顯示出來。
熱門文章
