首页IT科技css 文字 渐变(CSS实现文字颜色渐变)

css 文字 渐变(CSS实现文字颜色渐变)

时间2025-05-21 14:48:18分类IT科技浏览3613
导读: 三行代码即可实现: background:...

 三行代码即可实现:

background: linear-gradient(to bottom, #ffff, #f8fdff, #acf5ff, #67eeff, #24d8ff); -webkit-background-clip: text; color: transparent;

一 先设置背景颜色渐变 

background 渐变属性可选值:

1    linear-gradient  为线性渐变

2     radial-gradient  为径向渐变

3      repeating-linear-gradient  重复线性渐变

4      repeating-radial-gradient  重复径向渐变

基本语法

线性渐变 :background:linear-gradient (渐变角度,颜色值1,颜色值2,… …颜色值n);

渐变角度是指水平线和渐变线之间的夹角,可以是以deg为单位的角度值或“to”加“left”“right”“top”和“bottom”等关键词。

颜色值:用于设置渐变颜色,“颜色值1”为起始颜色,“颜色值n”为结束颜色。

径向渐变:

background:radial-gradient(渐变形状圆心位置,颜色值1,颜色值2,… …颜色值n);

重复线性渐变:

background:repeating-linear-gradient(渐变角度,颜色值1,颜色值2,… …颜色值n);

重复径向渐变:

background:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,… …颜色值n);

二 设置背景作用域

-webkit-background-clip: text;  设置值 为text,表示作用在文字上

其他 语法  background-clip: border-box|padding-box|content-box;

border-box 默认值。背景绘制在边框方框内(剪切成边框方框)。 padding-box 背景绘制在衬距方框内(剪切成衬距方框)。 content-box 背景绘制在内容方框内(剪切成内容方框)。

三  设置文字透明    

  color: transparent;

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
电脑装数据库(主机装数据库蓝屏怎么办)