CSS渐变文字

阳光穿透心脏的1/2处 2024-03-26 22:09 83阅读 0赞

**代码展示**

.box{
            background-image: -webkit-linear-gradient(
                /*颜色从左向右渐变*/
                    0deg,
                    yellow,
                    red 10%,
                    green 50%);
            -webkit-background-clip: text;
            color: transparent;
        }

效果展示  
![在这里插入图片描述][c4c26d9f5d1c476ca447a33597ddc30e.png_pic_center]

**代码展示**

.box{
            background-image: -webkit-linear-gradient(
                颜色从左向右渐变
                    -90deg,
                    yellow,
                    red 10%,
                    green 50%);
            -webkit-background-clip: text;
            color: transparent;
        }

效果图  
![在这里插入图片描述][056094d3db12468382674fc8a560e4b3.png_pic_center]

[c4c26d9f5d1c476ca447a33597ddc30e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/90d5a45eb5b0444fb9243ebd4e29877c.png
[056094d3db12468382674fc8a560e4b3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5b627be0aa52448eb1c90b879868723c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，83人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 霓虹灯文字

[在这里插入图片描述][201908292013381.gif] transform对行内元素无效，可以使用变换（transform）的元素必须是块级元素或者原子内联...

「爱情、让人受尽委屈。」/ 2024年04月17日 18:24/ 0 赞/ 73 阅读

相关 CSS渐变文字

代码展示 .box{ background-image: -webkit-linear-gradient( /

阳光穿透心脏的1/2处/ 2024年03月26日 22:09/ 0 赞/ 84 阅读

相关 CSS_渐变

线性渐变 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t

梦里梦外;/ 2023年10月06日 16:55/ 0 赞/ 38 阅读

相关 css背景渐变(灰色渐变背景)

css中文字的渐变怎么？css中文字的渐变怎么办洪资实业样式如下： .text-gradient \{ display: inline-block; colo

Dear 丶/ 2023年09月26日 13:13/ 0 赞/ 156 阅读

相关文字和页面特效——实现线性渐变的文字

实现线性渐变的文字实例描述在网页制作时，可以通过对文字颜色的设置来实现网页的特殊效果。本实例将使用CSS3实现文字线性渐变的效果。运行实例，在页面中会输出一串线

拼搏现实的明天。/ 2023年07月03日 07:25/ 0 赞/ 3 阅读

相关 css彩虹文字

用CSS3实现彩虹文字的效果，只在Webkit内核的浏览器（谷歌浏览器或移动端）上有效果。 background-image: -webkit-gr

淡淡的烟草味﹌/ 2023年06月04日 04:49/ 0 赞/ 2 阅读

相关 CSS 渐变

CSS 渐变 CSS 渐变 CSS 线性渐变语法线性渐变 - 从上到下（默认）

爱被打了一巴掌/ 2022年11月11日 10:59/ 0 赞/ 218 阅读

相关 CSS线性渐变，径向渐变

线性渐变： background-image: linear-gradient(to bottom,red 0px,yellow 100px); ![watermark

曾经终败给现在/ 2022年09月03日 13:12/ 0 赞/ 247 阅读

相关 canvas渐变文字

使用canvas创建渐变文字。效果如下： ![Center][] 代码如下： <!DOCTYPE html> <html> <he

蔚落/ 2022年07月15日 08:36/ 0 赞/ 281 阅读

相关 css文本、文字

css文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等。 css字体属性定义文本的字体系列、大小、加粗、风格和

拼搏现实的明天。/ 2022年06月06日 03:28/ 0 赞/ 317 阅读