CSS3j背景渐变，字体颜色渐变，以及兼容IE写法

最新推荐文章于 2025-04-30 15:36:54 发布

weixin_34209851

最新推荐文章于 2025-04-30 15:36:54 发布

阅读量2.4k

点赞数

原文链接：http://www.cnblogs.com/webwangjie/p/10001482.html

版权

本文详细介绍如何使用CSS3创建背景和文字渐变效果，包括线性渐变的不同方向设置，以及在低版本IE中通过滤镜实现渐变。同时，提供了两种实现文字渐变的方法，一种是利用背景渐变和透明文本，另一种是直接使用CSS3的渐变属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景渐变

#grad {

　　background: linear-gradient(red, blue);

}

渐变路径默认是从上到下，也可以指定路径：

从左到右

#grad {

background: linear-gradient(to right, red , blue);

}

从左上角到右下角

#grad {

　　 background: linear-gradient(to bottom right, red , blue);

}

　　低版本IE不支持css3的渐变，可以通过滤镜来实现渐变效果

　　filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');

　　参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平

二、文字渐变

第一种方法：

span {
　　background: linear-gradient(to right, red, blue);
　　-webkit-background-clip: text;

　　background-clip: text;
　　color: transparent;
}

第二种方法：

CSS代码：

.text-gradient {  
    display: inline-block; color: green; font-size: 10em; font-family: '微软雅黑'; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; };

HTML代码：

<h2 class="text-gradient">文字渐变</h2>

转载于:https://www.cnblogs.com/webwangjie/p/10001482.html