<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外的主流浏览器都有效。

通过css使文字有渐变的效果的更多相关文章

  1. css Backgroud-clip (文字颜色渐变)

    首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪...   按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...

  2. CSS使文字、大小不固定的图片垂直居中

    一:单行文字垂直居中 使用line-height为父元素高度即可. 二:多行文字垂直居中 使用display:table-cell属性. 将父元素设置为display:table-cell,同时ver ...

  3. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

  4. css实现内容渐变隐藏效果,手机网页版知乎内容隐藏效果的实现

    看到一个需求,如下图,知乎手机网页版的一个视觉效果,对内容很长的部分有一个渐变的隐藏的效果,个人觉得这个设计还是很好的,符合手机大小的应用场景,没有一下子显示完全,可以很快的滑倒页面底部,一定程度上减 ...

  5. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  7. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  8. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  9. css解决文字垂直居中

    参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html   http://zhidao.baidu.com/question ...

随机推荐

  1. 局域网内配置虚拟机的hostname

    一般上我们在局域网内访问,比如宿主机访问虚拟机的时候可以直接使用IP去访问,大多数情况下也都适用.但是对于有的情况,比如像新版的hbase的配置,它默认将localhost作为hbase.master ...

  2. digester解析xml文件

    在我们的项目中或多或少会采用xml来做配置文件,你可以采用Java原生支持的sax.DOM或者第三方的dom4j等.虽然提供了各式各样的解析方式,但是解析一个复杂的xml所编写的Java代码是非常麻烦 ...

  3. SQLHappy微软数据库连接查询操作,对数据的处理和查询

    (软件已更新,部分介绍与新版软件有出处) 1.服务连接界面介绍 2.主界面介绍 3.表搜索介绍 4.命令菜单部分介绍 5.插件介绍 6.帮助菜单介绍 7.数据库列表右键菜单 8.数据库结构和数据操作( ...

  4. css设置背景模糊

    使用filter属性来设置模糊值 效果: css样式: <style type="text/css"> .cover { width: 600px; height: 3 ...

  5. POJ P2104 K-th Number

    You are working for Macrohard company in data structures department. After failing your previous tas ...

  6. React+antd 在限制高度内实现滚动显示多个组件(show scrolled components in a limited height with react antd)

    效果: 代码: import React from 'react'; import { Table } from 'antd'; import DatePicker1 from './DatePick ...

  7. AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】

    1.入口页面 存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp [html] view plain copy 在CODE上查看代码片派生到 ...

  8. Java设计模式—桥梁模式

    终于又碰到了一个简单点的模式了. 桥梁模式也叫做桥接模式,定义如下:                将抽象和实现解耦,使得两者可以独立地变化. 这句话也太难理解了,桥梁模式是为了解决类继承的缺点而设计 ...

  9. HTML 5 教程

    HTML5 是下一代的 HTML.有必要再过一遍.看下要点. 具体看  http://www.w3school.com.cn/html5/index.asp    教程 和  HTML5 标签参考手册 ...

  10. numpy数组属性查看及断言

    numpy数组属性查看:类型.尺寸.形状.维度   import numpy as np a1 = np.array([1,2,3,4],dtype=np.complex128) print(a1) ...