CSS 实现文字颜色渐变的 3 种方法 |
您所在的位置：网站首页 › ae怎么设置渐变文字 › CSS 实现文字颜色渐变的 3 种方法 |
CSS 实现文字颜色渐变的 3 种方法
 最近小编的老大弥雅在开发自使用的 wordpress 主题的时候，打算部分元素中文字采用 CSS 实现颜色渐变。在查阅一些资料和求助一些前端大佬后总结出比较实用的三个方法，现在小编就分享给大家。 方法一background-image: -webkit-linear-gradient(...) 为文本元素提供渐变背景。 -webkit-text-fill-color: transparent 使用透明颜色填充文本。 -webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。 缺点：webkit 内核浏览器特有
渐变色
.box {
position: relative;
text-align: left;
text-indent:30px;
line-height: 50px;
font-size: 40px;
font-weight: bolder;
background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Hello World ~
方法二 使用：mask-image缺点：webkit 内核浏览器特有 渐变色 .box { position: relative; text-align: left; text-indent:30px; line-height: 50px; font-size: 40px; font-weight: bolder; color: red; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); } Hello World ~ 方法三 采用 svg 方式 渐变色 .box-text { fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder; } 盖世神功 |
【本文地址】
今日新闻 |
推荐新闻 |