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. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  2. linux查找文件命令

    (2)find /etc -name httpd.conf #在/etc目录下文件httpd.conf

  3. 关于element-ui select组件change事件只要数据变化就会触发的解决办法

    使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中 ...

  4. Docker部署注册中心、Docker创建私有镜像库、自签名证书、Deploy a registry server

    这是我在内部部署Docker Registry时记录下来的笔记,操作环境是Centos 7.Docker 18.06.1-ce 1.运行registry 我当前所使用的主机的IP是192.168.1. ...

  5. Codeforces989E. A Trance of Nightfall

    $n \leq 200$个平面上的点,$q \leq 200$次询问:重复操作$m \leq 10000$次,到达点$x$的概率最大是多少.操作:一开始选点$P$,不一定要是给定点,可以是平面上任一点 ...

  6. 页面之间传值的方法asp

    原文发布时间为:2008-06-02 -- 来源于本人的百度文章 [由搬家工具导入] asp.net页面间传值 今天学习中要在两个页面中传值,网上搜了一下,asp.net主要用到三个方法,前两个req ...

  7. HDU 6231 (二分+双指针)

    题意:给一个长度为n的数组,问在由这个数组的所有的区间第k小组成B数组中,第m大元素是多少 解法:这题较难的地方在于转化思维.如果去求所有区间的第k小,最坏复杂度是O(n*n)肯定超时. 这题正确的解 ...

  8. CSS3-文本渐变色

    在活动中,文字的颜色经常采用渐变的效果,在此,做一下笔记 <span>你好呀!</span> span{ background-image: linear-gradient(t ...

  9. js 时间戳与yyyy-mm-dd或yyyy-MM-dd HH-mm-ss互相转换

    首先是获取当前系统时间转换为时间戳 var timestamp = Date.parse(new Date());//获取当前时间 timestamp = timestamp / 1000; 然后是时 ...

  10. [JSOI 2015] 子集选取

    4475: [Jsoi2015]子集选取 Time Limit: 1 Sec  Memory Limit: 512 MBSubmit: 363  Solved: 255[Submit][Status] ...