1.背景渐变:

.linear {
width: 100%;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/
background: -ms-linear-gradient(left, #F05E5E, #F9B03E); /* IE 10 */
background: -moz-linear-gradient(left,#F05E5E,#F9B03E); /*火狐*/
background: -webkit-gradient(linear, 100% 100%, 100% 100%,from(#F9B03E), to(#F05E5E)); /*谷歌*/
background: -webkit-gradient(linear, 100% 100%, 100% 100%, from(#F05E5E), to(#F9B03E)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #F05E5E, #F9B03E); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #F05E5E, #F9B03E); /*Opera 11.10+*/
}

2.字体渐变:

.text-gradient {
color: #F05E5E;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F05E5E), to(#F9B03E));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

css3背景及字体渐变的更多相关文章

  1. CSS3——背景 文本 字体 链接 列表样式 表格

    背景 background-color rgb(255,0,0,1)      最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-rep ...

  2. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  3. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  4. CSS3背景与渐变

    一.CSS3 背景图像区域 background-clip(指定背景绘制区域) ackground-clip: border-box / padding-box / content-box; /*没有 ...

  5. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  6. 第七十九,CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...

  7. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  8. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  9. CSS SANS – 神奇!使用 CSS3 创建的字体

    在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...

随机推荐

  1. HDU——1789Doing Homework again(贪心)

    Doing Homework again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  2. iOS-多线程(3)

    多线程之GCD(grand central dispatch)中心调度 为了简化多线程的操作,iOS为我们提供了GCD来实现编程. 使用GCD只要遵守两个步骤即可: 创建对列(串行队列,并行队列) 将 ...

  3. SQL Server 2016 KB2919355 安装失败

    Windows Server 2012 R2 安装 SQL Server 2016 检查未通过,需要安装 KB2919355 . 错误如下图: 按提示,下载安装 Windows Server 2012 ...

  4. bzoj 2437[Noi2011]兔兔与蛋蛋 黑白染色二分图+博弈+匈牙利新姿势

    noi2011 兔兔与蛋蛋 题目大意 直接看原题吧 就是\(n*m\)的格子上有一些白棋和一些黑棋和唯一一个空格 兔兔先手,蛋蛋后手 兔兔要把与空格相邻的其中一个白棋移到空格里 蛋蛋要把与空格相邻的其 ...

  5. poj 1430 Binary Stirling Number 求斯特林数奇偶性 数形结合| 斯特林数奇偶性与组合数的关系+lucas定理 好题

    题目大意 求子集斯特林数\(\left\{\begin{matrix}n\\m\end{matrix}\right\}\%2\) 方法1 数形结合 推荐一篇超棒的博客by Sdchr 就是根据斯特林的 ...

  6. css3 背景图动画一

    一 实现背景图循环播放 @keyframes mlfly { 0%{ background-position:0 0; } 100%{ background-position:210px 0; } } ...

  7. C语言中的bool类型

    C99中提供了一个头文件 <stdbool.h> 定义了bool代表_Bool,true代表1,false代表0.只要导入 stdbool.h ,就能非常方便的操作布尔类型了. 代码如下: ...

  8. hdu 1254(搜索题)

    推箱子 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  9. Kafka应用实践与生态集成

    1.前言 Apache Kafka发展至今,已经是一个很成熟的消息队列组件了,也是大数据生态圈中不可或缺的一员.Apache Kafka社区非常的活跃,通过社区成员不断的贡献代码和迭代项目,使得Apa ...

  10. zookeeper源码 — 四、session建立

    目录 session建立的主要过程 客户端发起连接 服务端创建session session建立的主要过程 用一张图来说明session建立过程中client和server的交互 主要流程 服务端启动 ...