CSS渐变文字

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

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

相关阅读

相关 CSS3 霓虹灯文字

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

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

相关 CSS3 花屏文字

原理图 ![在这里插入图片描述][20190827114414612.gif] 想要看原理图的话，仅需要加上如下样式 .scanline { ...

灰太狼/ 2024年04月17日 14:19/ 0 赞/ 37 阅读

相关 CSS3 骨折文字

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

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

相关 CSS渐变文字

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

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

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

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

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

相关 CSS 渐变

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

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

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

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

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

相关 canvas渐变文字

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

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

相关 css文本、文字

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

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

相关 css 线性渐变

线性渐变 background:linear-gradient(方向,颜色1，颜色2,..); 方向默认从上往下自定义方向

傷城~/ 2021年07月24日 14:36/ 0 赞/ 513 阅读