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字体,一起来围观下. 在线 ...
随机推荐
- 解决ul的li横向排列换行的问题
1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...
- NOJ——1568走走走走走啊走(超级入门DP)
[1568] 走走走走走啊走 时间限制: 1000 ms 内存限制: 65535 K 问题描述 菜菜赚了钱回来,想起要买很多桶回来,不同地方的桶质量是不同的,他在(1,1)点出发因为飞机票有点贵所以他 ...
- Java面试题之ArrayList和LinkedList的区别
先看下类图: 相同点: 都实现了List接口和Collection: 不同点: 1.ArrayList是基于数组实现的:LinkedList是基于链表实现的: 2.ArrayList随机查询速度快:L ...
- canvas 转化为 img
]; var image = new Image(); image.src = c.toDataURL("image/png"); $("#qrcode canvas&q ...
- APUE 学习笔记(九) 高级I/O
1. 非阻塞I/O 低速系统调用时可能会使进程永远阻塞的一类系统调用,包括以下调用: (1)某些文件类型你(网络socket套接字.终端设备.管道)暂无可使用数据,则读操作可能会使调用者永远阻塞 (2 ...
- 42深入理解C指针之---指针与队列
一.借助第40指针与链表的相关内容,稍微修改即可: 1.定义头文件queue.h代码如下: #include <stdlib.h> #include <stdio.h> #if ...
- BZOJ 3309 莫比乌斯反演
题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3309 题意:定义f(n)为n所含质因子的最大幂指数,求 $Ans=\sum _{i=1} ...
- OceanBase数据库实践入门——手动搭建OceanBase集群
前言 目前有关OceanBase功能.案例.故事的文章已经很多,对OceanBase感兴趣的朋友都想安装一个数据库试试.本文就是分享初学者如何手动搭建一个OceanBase集群.这也是学习理解Ocea ...
- ssm实现查看流程图
jsp <!--显示数据列表--> <tbody id="TableData" class="dataContainer" datakey=& ...
- JDK1.8日期时间库学习
这周在阅读<阿里巴巴Java开发手册>时,在并发处理一节的日期处理中,其强调SimpleDateFormat 是线程不安全的类,一般不要定义为 static 变量,如果 定义为 stati ...