【Vue_10】渐变色文字

原创
04/04 11:55
阅读数 419

实现渐变色文字的原理,将背景色改为渐变,然后将背景剪裁出文字,最后将文字隐藏

一. CSS 样式示例

/* 将背景设为渐变 */
background-image: -webkit-linear-gradient(top, white, #a4a4a4, #6a6b6b);
/* 规定背景绘制区域 */
-webkit-background-clip: text;
/* 将文字隐藏 */
-webkit-text-fill-color: transparent;

二. 属性详解

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);

2. background-clip

background-clip 属性指定背景绘制区域

浏览器支持

语法

/* 
    border-box	默认值。背景绘制在边框方框内(剪切成边框方框)。
    padding-box	背景绘制在衬距方框内(剪切成衬距方框)。
    content-box	背景绘制在内容方框内(剪切成内容方框)。
    text 以文字为绘制背景(剪裁成文字)
*/
background-clip: border-box|padding-box|content-box;

3. text-fill-color

text-fill-color 文本填充颜色,CSS 3新属性。

浏览器支持

只适用于webkit内核

text-fill-color 一般设置为 transparent(透明),然后使用 background-image 渐变颜色来设置文字的背景色,使用 background-clip 来截取文字

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部