实例:实现预期效果

代码实现:
| <head> |
| <meta charset="utf-8"> |
| <title>渐变文字</title> |
| <style> |
| #grad1 { |
| margin: auto; |
| font-family: SourceHanSansCN-Bold; |
| font-size: 48px; |
| font-weight: normal; |
| font-style: italic; |
| font-stretch: normal; |
| line-height: 38px; |
| letter-spacing: 0px; |
| color: #FFFFFF; |
| background-image: -webkit-linear-gradient(bottom,blue,white); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| line-height: 50px; |
| font-weight: 600; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="grad1">渐变文字</div> |
| </body> |
CSS linear-gradient() 函数
定义与用法
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果。(如果不指定方向,默认从上到下渐变。)
注意: Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。
基本用法:
background-image: linear-gradient(red, yellow, blue);

| |
| linear-gradient(blue, red); |
| |
| |
| linear-gradient(45deg, blue, red); |
| |
| |
| linear-gradient(to left top, blue, red); |
| |
| |
| linear-gradient(0deg, blue, green 40%, red); |
基本语法:
| background-image: linear-gradient(direction, color-stop1, color-stop2, ...); |
值 |
用途 |
direction |
用角度值指定渐变的方向(或角度)。 |
color-stop1, color-stop2,... |
用于指定渐变的起止颜色。 |
值 |
举例 |
direction |
to right(从左到右)、 to bottom right(从左上角到右下角)、180deg、0deg... |
color-stop1, color-stop2,... |
orange、yellow、green、blue... |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」