css 颜色渐变 兼容性
参考文献:http://caibaojian.com/css3-background-gradient.html
https://www.cnblogs.com/xzzzys/p/7495725.html
目标:
一开始用 background: linear-gradient(to right, #000,#fff) :
谷歌、360极速模式、火狐、欧朋(都是新版)可以兼容
ie9 不可以兼容
所以为了ie或其他较低版本浏览器兼容:
.gradient{
width: 973px;
height: 100%;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* 兼容Safari4-5, chrome1-9 */
background: -moz-linear-gradient(right, #000000 0%, #ffffff 100%); /* firefox */
background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* chrome */
background: -o-linear-gradient(right, #000000 0%,#ffffff 100%); /* opera */
background: -ms-linear-gradient(right, #000000 0%,#ffffff 100%); /* ie */
background: linear-gradient(to right, #000000,#ffffff); /* firefox */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1)"; /* 兼容IE8~IE9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* 兼容IE5~IE9 */
}
注意:
1、filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); 中 GradientType=1 代表水平 , GradientType=0 代表从上往下(默认从上往下)
还要特别值得注意的是 startColorstr='#000000' 中的 16进制颜色 不能简写 为 #000 ,不然也不会识别达到效果
2、background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); 中 left开始位置,其他都都是结束位置
这样就可以兼容了。
css 颜色渐变 兼容性的更多相关文章
- css颜色渐变在不同浏览器的设置
在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...
- CSS颜色渐变
一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...
- css 颜色渐变
.top_nav { width: 100%; height: 29px; /* 如果浏览器不支持渐变,使用图像作为背景 */ background: u ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
- 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 ...
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css文字颜色渐变的3种实现
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...
- 【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...
- CSS3颜色渐变模式
1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...
随机推荐
- MySQL性能调优 – 你必须了解的15个重要变量
1.DEFAULT_STORAGE_ENGINE 如果你已经在用MySQL 5.6或者5.7,并且你的数据表都是InnoDB,那么表示你已经设置好了.如果没有,确保把你的表转换为InnoDB并且设置d ...
- bzoj 4885: [Lydsy2017年5月月赛]长方体
Description 给定一个a*b*c的长方体,定义其表面上两个点的距离为沿着长方体的表面走的最短路径的长度,请找到距离最远的点对,你需要保证找到的两个点里至少有一个是长方体顶点. Input 第 ...
- bzoj4576 [Usaco2016 Open]262144
题目大意: 给出n个数a[1..n],n<=262144,a[i]<=40,相邻且相同的数可以合并成一个并将值加1,问能获得的最大数是多少 用一个双向链表维护原数列,每个节点记录此节点对应 ...
- [转][C#]压缩解压缩类 GZipStream
本文来自:https://msdn.microsoft.com/zh-cn/library/system.io.compression.gzipstream(v=vs.100).aspx using ...
- Express详解
express() 创建一个express应用程序 var express = require('express'); var app = express(); app.get('/', functi ...
- JDK、Spring、Quartz等几种不同定时器的用法,以及cronExpression表达式定义
referenc:https://blog.csdn.net/clementad/article/details/42042111 下面介绍几种常用的定时器及其实现方法: 第一种:Timer和Time ...
- PyQt5系列教程(三)用py2exe进行程序打包
软硬件环境 Windows 10 Python 3.4.2 PyQt5 Py2exe 前言 在我们开发了完整的PyQt5项目后,一般都会将其打包成exe文件,方便其他人使用.今天我们就用Py2exe这 ...
- Requests抓取火车票数据
1.数据接口 https://kyfw.12306.cn/otn/lcxxcx/query?purpose_codes=ADULT&queryDate=2016-08-01&from_ ...
- 使用http-proxy-middleware 代理跨域
使用http-proxy-middleware 代理跨域 例如请求的url:“http://f.apiplus.cn/bj11x5.json” 1.打开config/index.js,在proxyTa ...
- 可视化库-Matplotlib-盒图(第四天)
盒图由五个数值点组成,最小观测值,下四分位数,中位数,上四分位数,最大观测值 IQR = Q3 - Q1 Q3表示上四分位数, Q1表示下四分位数,IQR表示盒图的长度 最小观测值 min =Q1 ...