惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

阮一峰的网络日志
阮一峰的网络日志
Hugging Face - Blog
Hugging Face - Blog
Recent Announcements
Recent Announcements
MongoDB | Blog
MongoDB | Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
G
Google Developers Blog
L
LangChain Blog
The GitHub Blog
The GitHub Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
GbyAI
GbyAI
MyScale Blog
MyScale Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
U
Unit 42
Martin Fowler
Martin Fowler
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Apple Machine Learning Research
Apple Machine Learning Research
爱范儿
爱范儿
博客园 - 聂微东
大猫的无限游戏
大猫的无限游戏
M
MIT News - Artificial intelligence
A
About on SuperTechFans
Stack Overflow Blog
Stack Overflow Blog
V
V2EX

博客园 - 一丝心情

Volta 安装和使用指南 免费国产ai试用总结 glb格式3d模型压缩 nuxt.js 项目流水线自动部署设置 免费的云数据库 vue 实用指令 IntelliJ IDEA license server 激活(亲测有效) win10/win11专业版激活码(亲测有效) Git 常用指令完全指南 npm 安装依赖报错整理 http/https与websocket的ws/wss的关系 指令 v-tooltip vue 自定义指令实现v-overflow-tooltip element-ui NavMenu 多级嵌套封装 常用css vue.config.js config.resolve.alias 目录别名配置 three.js 在低版本浏览报THREE.WebGLProgran: shader error 报错解决办法 nuxt 低版本浏览器兼容babel编译配置 常用软件历史版本下载 前端常用指令 数组常用方法总结 vue 中 echarts 添加事件 常用正则
css3文字渐变, svg文字渐变
一丝心情 · 2023-09-22 · via 博客园 - 一丝心情

1.svg 文字渐变

      <!-- 横向渐变(x1,y1,x2,y2控制渐变方向) -->
      <svg>
        <defs>
            <linearGradient id="grad_red_blue_lr" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:red; stop-opacity:1" />
              <stop offset="100%" style="stop-color:blue; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="36" fill="url(#grad_red_blue_lr)" style="font-size:36px">
          渐变文字{x1: "0%",y1: "0%", x2: "100%", y2: "0%"}
        </text>
      </svg>

      <!-- 纵向渐变(x1,y1,x2,y2控制渐变方向) -->
      <svg>
        <defs>
            <linearGradient id="grad_red_blue_tb" x1="0%" y1="100%" x2="0%" y2="0%">
              <stop offset="0%" style="stop-color:red; stop-opacity:1" />
              <stop offset="100%" style="stop-color:blue; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="36" fill="url(#grad_red_blue_tb)" style="font-size:36px">
          渐变文字{x1: "0%",y1: "100%", x2: "0%", y2: "0%"}
        </text>
      </svg>

      <!-- 横向渐变(gradientTransform: rotate) -->
      <svg>
        <defs>
            <linearGradient id="grad_red_yellow_lr" gradientTransform="rotate(0)">
              <stop offset="0%" style="stop-color:red; stop-opacity:1" />
              <stop offset="100%" style="stop-color:yellow; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="36" fill="url(#grad_red_yellow_lr)" style="font-size:36px">
          渐变文字{gradientTransform: "rotate(0)"}
        </text>
      </svg>

      <!-- 纵向渐变(gradientTransform: rotate)-->
      <svg>
        <defs>
            <linearGradient id="grad_red_yellow_tb" gradientTransform="rotate(90)">
              <stop offset="0%" style="stop-color:red; stop-opacity:1" />
              <stop offset="100%" style="stop-color:yellow; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="36" fill="url(#grad_red_yellow_tb)" style="font-size:36px">
          渐变文字{gradientTransform: "rotate(90)"}
        </text>
      </svg>