通过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外的主流浏览器都有效。
通过css使文字有渐变的效果的更多相关文章
- css Backgroud-clip (文字颜色渐变)
首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪... 按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...
- CSS使文字、大小不固定的图片垂直居中
一:单行文字垂直居中 使用line-height为父元素高度即可. 二:多行文字垂直居中 使用display:table-cell属性. 将父元素设置为display:table-cell,同时ver ...
- 【转】CSS实现兼容性的渐变背景(gradient)效果
一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...
- css实现内容渐变隐藏效果,手机网页版知乎内容隐藏效果的实现
看到一个需求,如下图,知乎手机网页版的一个视觉效果,对内容很长的部分有一个渐变的隐藏的效果,个人觉得这个设计还是很好的,符合手机大小的应用场景,没有一下子显示完全,可以很快的滑倒页面底部,一定程度上减 ...
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 【转】CSS设置DIV背景色渐变显示
[原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css"> .linear{ ...
- CSS设置DIV背景色渐变显示
本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- css解决文字垂直居中
参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html http://zhidao.baidu.com/question ...
随机推荐
- 局域网内配置虚拟机的hostname
一般上我们在局域网内访问,比如宿主机访问虚拟机的时候可以直接使用IP去访问,大多数情况下也都适用.但是对于有的情况,比如像新版的hbase的配置,它默认将localhost作为hbase.master ...
- digester解析xml文件
在我们的项目中或多或少会采用xml来做配置文件,你可以采用Java原生支持的sax.DOM或者第三方的dom4j等.虽然提供了各式各样的解析方式,但是解析一个复杂的xml所编写的Java代码是非常麻烦 ...
- SQLHappy微软数据库连接查询操作,对数据的处理和查询
(软件已更新,部分介绍与新版软件有出处) 1.服务连接界面介绍 2.主界面介绍 3.表搜索介绍 4.命令菜单部分介绍 5.插件介绍 6.帮助菜单介绍 7.数据库列表右键菜单 8.数据库结构和数据操作( ...
- css设置背景模糊
使用filter属性来设置模糊值 效果: css样式: <style type="text/css"> .cover { width: 600px; height: 3 ...
- POJ P2104 K-th Number
You are working for Macrohard company in data structures department. After failing your previous tas ...
- React+antd 在限制高度内实现滚动显示多个组件(show scrolled components in a limited height with react antd)
效果: 代码: import React from 'react'; import { Table } from 'antd'; import DatePicker1 from './DatePick ...
- AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】
1.入口页面 存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp [html] view plain copy 在CODE上查看代码片派生到 ...
- Java设计模式—桥梁模式
终于又碰到了一个简单点的模式了. 桥梁模式也叫做桥接模式,定义如下: 将抽象和实现解耦,使得两者可以独立地变化. 这句话也太难理解了,桥梁模式是为了解决类继承的缺点而设计 ...
- HTML 5 教程
HTML5 是下一代的 HTML.有必要再过一遍.看下要点. 具体看 http://www.w3school.com.cn/html5/index.asp 教程 和 HTML5 标签参考手册 ...
- numpy数组属性查看及断言
numpy数组属性查看:类型.尺寸.形状.维度 import numpy as np a1 = np.array([1,2,3,4],dtype=np.complex128) print(a1) ...