通过css使文字有渐变的效果

<style>　　.color{background-image: -webkit-gradient(linear, left center, right center, from(rgba(0, 0, 0, 1)), to(rgba(255, 0, 0, 1))); //渐变-webkit-background-clip: text; //规定背景的绘制区域-webkit-text-fill-color: transparent; //规定文字的填充色　　}
</style>

<div class="color">花里胡哨</div>

经过测试在除IE外的主流浏览器都有效。

转载于:https://www.cnblogs.com/xueweijie/p/7007773.html

通过css使文字有渐变的效果相关推荐

css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
css Backgroud-clip (文字颜色渐变)
首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪... 按照我自己的理解就是背景的显示区域此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...
CSS 使文字纵向排列的七种方
下面分享一下使文字纵排列的几种方法: 第一种方法:"<br>"标签 <h1> N E T T U T S </h1> 这种方法没有说服力,不推荐 ...
用css实现文字的渐渐浮现效果
可以使用 CSS 的 animation 属性来实现文字的渐渐浮现效果. 首先,你需要给要实现这个效果的文字元素设置一个 animation 属性,并指定一个动画名称.例如: .fade-in {an ...
css实现文字镂空和遮罩效果（background-clip或者 -webkit-text-stroke）
background-clip定义和用法 background-clip 属性规定背景的绘制区域. 默认值: border-box 继承性: no 版本: CSS3 JavaScript 语法: ob ...
html/css使文字图片div在整个网页上居中（水平居中+垂直居中）transform属性配置
在使用html/css编写网页时,有时需要让一段文字或图片等在整个网页居中,即既是水平居中又是垂直居中,而单单使用 text-align:center 只是让文字在水平上居中,而无法在垂直方向上也居中 ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
html如何让字体自动变色,CSS使文字部分变色
思路思路很简单,就是一个字写两遍,一个字只显示部分,不过不能真的把一个字写两遍.这里就需要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪&quo ...
JS+CSS实现一个底部渐变波浪效果
今天又来分享一个网页特效,自己瞎写的,类似一个波浪效果,并且有背景渐变,就叫做底部渐变波浪把先看看效果图: 实现代码实现原理也很简单,就是使用@keyframes定义动画函数,然后对每个元素应用a ...
CSS实现文字颜色渐变
三行代码即可实现: background: linear-gradient(to bottom, #ffff, #f8fdff, #acf5ff, #67eeff, #24d8ff);-webkit- ...

通过css使文字有渐变的效果

通过css使文字有渐变的效果相关推荐

最新文章

热门文章