css实现文字渐变色(兼容性写法、渐进增强、平稳退化)

2024-01-25 07:49| 来源: 网络整理| 查看: 265

一、第一种方法通过background-clip实现

原理：为文字设置渐变背景颜色，并设置透明颜色字体，使用background-clip:text对背景进行裁剪，留下文本部分的背景，从而实现渐变效果。

问题：background-clip: text的兼容性并不好，一旦浏览器不兼容，背景就会直接暴露出来。

.linear-gradient-text { 　　background: linear-gradient(to right, red, blue); 　　-webkit-background-clip: text; 　　background-clip: text; 　　color: transparent; }

浏览器支持background-size:text情况下：在这里插入图片描述浏览器不兼容情况下：

解决办法：如果对兼容性要求不高，且为了保证平稳退化，可以使用css的特征检测选择器@supports，虽然这个选择器本身也有兼容性问题，但是这样写至少能保证有一个默认颜色。

可以到https://caniuse.com/，查看具体的浏览器支持度。

.linear-gradient-text { color: blue; @supports (-webkit-background-clip: text) or (background-clip: text) { background: linear-gradient(to right, red, blue); -webkit-background-clip: text; background-clip: text; color: transparent; } }

浏览器不兼容情况下：在这里插入图片描述

二、第二种方法通过svg标签实现（只要浏览器支持svg标签就行，兼容性相比第一种要好）

渐变文字

【本文地址】

公司简介

联系我们