CSS渐变文字

阳光穿透心脏的1/2处 2024-03-26 22:09 101阅读 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 条评论，101人围观）

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

相关阅读

相关 CSS3 霓虹灯文字

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

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

相关 CSS3 骨折文字

[在这里插入图片描述][20190826160455847.gif] <!DOCTYPE html> <html> <head> <ti...

╰半夏微凉°/ 2024年04月17日 06:23/ 0 赞/ 83 阅读

相关 CSS渐变文字

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

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

相关实现文字上下渐变的CSS技巧：打造独特视觉效果

1.前言在网页设计中，通过CSS为文字创建渐变效果是一种引人注目的方式。文字上下渐变可以为页面添加独特的视觉效果，吸引用户的注意力。本文将介绍如何使用CSS实现文字上下

叁歲伎倆/ 2024年02月05日 23:39/ 0 赞/ 10 阅读

相关 CSS_渐变

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

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

相关 css彩虹文字

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

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

相关 css渐变

从左往右渐变 background:\74F195; background:-webkit-linear-gradient(left,\74F195,\C8

不念不忘少年蓝@/ 2023年02月11日 12:24/ 0 赞/ 26 阅读

相关 CSS 渐变

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

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

相关 canvas渐变文字

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

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

相关 css文本、文字

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

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