vue 渐变色文字
时间:2022-07-26
本文章向大家介绍vue 渐变色文字,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.1 CSS 样式示例
/* 将背景设为渐变 */
background-image: -webkit-linear-gradient(top, white, #a4a4a4, #6a6b6b);
/* 规定背景绘制区域 */
-webkit-background-clip: text;
/* 将文字隐藏 */
-webkit-text-fill-color: transparent;
1.2 属性详解
1.2.1 linear-gradient
linear-gradient() 函数用于创建一个线性渐变的 “图像”。
☞ 浏览器支持
☞ 语法
/* direction: 方向;color-stop: 颜色 */
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
☞ 示例
/* 从左侧开始的线性渐变,从红色开始,转为黄色 */
background-image: linear-gradient(to right, red , yellow);
/* 从左上角到右下角的线性渐变 */
background-image: linear-gradient(to bottom right, red , yellow);
1.2.2 background-clip
background-clip 属性指定背景绘制区域
☞ 浏览器支持
☞ 语法
/*
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box 背景绘制在衬距方框内(剪切成衬距方框)。
content-box 背景绘制在内容方框内(剪切成内容方框)。
text 以文字为绘制背景(剪裁成文字)
*/
background-clip: border-box|padding-box|content-box;
1.2.3 text-fill-color
text-fill-color 文本填充颜色,CSS 3新属性。
☞ 浏览器支持 只适用于webkit内核
☞ 注意 text-fill-color 一般设置为 transparent(透明),然后使用 background-image 渐变颜色来设置文字的背景色,使用 background-clip 来截取文字
- javascript 红皮高程(16)
- javascript 红皮高程(15)
- javascript 红皮高程(21)-- 乘性操作符
- javascript 红皮高程(20)-- 逻辑或
- javascript 红皮高程(19)-- 逻辑与
- 技术分享 | 浅谈 RAS
- Sniper-OJ 练习平台多题WriteUp
- 怎么能学透一个知识点
- Jarvis-OJ平台多题WriteUp分享
- 会员提问 之 JS中的私有方法有什么意义?
- 本周末的QQ群视频--还是电商网站的事
- 【译】使用Apache的mod重写来保护你的C2 Empire
- 大白话,设计一个购物车对象
- 【译】Cromos – 下载并注入代码到谷歌 Chrome 浏览器扩展中
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法