css3背景及字体渐变
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背景及字体渐变的更多相关文章
- CSS3——背景 文本 字体 链接 列表样式 表格
背景 background-color rgb(255,0,0,1) 最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-rep ...
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- 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 ...
- CSS3背景与渐变
一.CSS3 背景图像区域 background-clip(指定背景绘制区域) ackground-clip: border-box / padding-box / content-box; /*没有 ...
- css3背景颜色渐变属性
https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...
- 第七十九,CSS3背景渐变效果
CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...
- [转]真正了解CSS3背景下的@font face规则
本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...
- CSS3背景 制作导航菜单综合练习题
CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...
- CSS SANS – 神奇!使用 CSS3 创建的字体
在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...
随机推荐
- [CODEVS1911] 孤岛营救问题(分层图最短路)
传送门 吐槽:神tm网络流... 用持有的钥匙分层,状态压缩,用 2 进制表示持有的钥匙集合. dis[i][j][k] 表示持有的钥匙集合为 k,到达点 (i, j) 的最短路径. 分层图的最短路听 ...
- .sh 和 .ksh —— 三种主要的 Shell简介(Korn shell)
和现在的开发语言一样,语法上有些差异! 三种主要的 Shell 与其分身 在大部份的UNIX系统,三种著名且广被支持的shell 是Bourne shell(AT&T shell,在 Linu ...
- oracle中查询BLOB
1. 2.
- python算法与数据结构-顺序表(37)
1.顺序表介绍 顺序表是最简单的一种线性结构,逻辑上相邻的数据在计算机内的存储位置也是相邻的,可以快速定位第几个元素,中间不允许有空,所以插入.删除时需要移动大量元素.顺序表可以分配一段连续的存储空间 ...
- 【NOIP2016练习】T3 tree (树形DP)
题意:一棵有N个结点的树,每个节点上有权值c[i] 需要选出若干结点,对于任意结点他的所有祖先都被选取且选取总个数不能超过lim 在此前提下使权值和最大 n,lim<=3000 思路:WA了1次 ...
- 【webstrom】webstrom打开多个项目,webstrom常用快捷键
1.webstrom打开多个项目 默认情况下一次只能打开一个项目,如果需要打开多个就按照下面的方法 File -> settings -> Directories -> Add Co ...
- 标准C程序设计七---35
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- [leetcode]84.Largest Rectangle in Histogram ,O(n)解法剖析
Given n non-negative integers representing the histogram's bar height where the width of each bar is ...
- configure: error: Building GCC requires GMP 4.2+, MPFR 2.4.0+ and MPC 0.8.0+.
configure: error: Building GCC requires GMP 4.2+, MPFR 2.4.0+ and MPC 0.8.0+. 一.错误发生情景: 在安装gcc时,执行.c ...
- Linux 之 文件压缩解压
文件压缩解压 参考教程:[千峰教育] 命令: gzip: 作用:压缩文件,只能是单个文件,不能是多个,也不能是目录. 格式:gzip file 说明:执行命令会生成file.gz,删除原来的file ...