通过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 ...
随机推荐
- Cheatsheet: 2017 10.01 ~ 12.31
Mobile Updating Your App for iOS 11 Get Started With Natural Language Processing in iOS 11 Getting S ...
- 【转】Java策略消除if else
策略(Strategy)模式:又名Policy,它的用意是定义一组算法,把它们一个个封装起来,并且使他们可以相互替换.策略模式可以独立于使用他们的客户端而变化.GOF策略模式静态结构类图如下: 通过上 ...
- Spring MVC No converter found for return value of type 解决方法
1.在pom中添加 jackson <properties> <jackson.version>2.8.5</jackson.version> </prope ...
- docker 安装PIL python 报错 IOError: decoder zip not available
按照网上得方法:安装依赖库:yum install freetype freetype-develyum install libjpeg libjpeg-develyum install zlib z ...
- BZOJ4650: [Noi2016]优秀的拆分(hash 调和级数)
题意 题目链接 Sol NOI的题都这么良心么.. 先交个\(n^4\)暴力 => 75 hash优化一下 => 90 然后\(90\)到\(100\)分之间至少差了\(10\)难度台阶= ...
- 服务器学习笔记之servlet
初衷 想学习下服务器这边的知识,制定了一条学习路线:java8--->servlet--->springMvc--->springBoot--->springCloud.在此当 ...
- 关于beginPath()和closePath()的关系>>canvas的beginPath和closePath分析总结,包括多段弧的情况
今天查了一下beginPath()和closePath()关于区域的划分问题,发现到一篇解释得很明白的文章,我就直接转载到这里了. 原文请看:canvas的beginPath和closePath分析总 ...
- 全面认识Docker和基本指令
Docker逐渐成为虚拟化技术的佼佼者,Java架构师之路接下来会推出一系列的Docker相关技术文章,Docker技术也是架构师的必备技能. 什么是Docker Docker 是一个开源的应用容器引 ...
- CAD增强属性块的还原(转)
来自:http://blog.3snews.net/space.php?uid=13924959&do=blog&id=70174 作者:毛毛虫 Demo下载:CAD增强属性块的还原 ...
- RocketMQ读书笔记6——可靠性优先的使用场景
[顺序消息] 顺序消费是指消息的产生顺序和消费顺序相同. 比如订单的生成.付款.发货,这三个消息必须按顺序处理才可以. [顺序消息的分类] 全局顺序消息和部分顺序消息. 上面订单的例子,其实是部分顺序 ...