一、CSS3实现兼容性渐变背景效果,兼容FF、chrome、IE

渐变效果,现在主流的浏览器FF、Chrome、Opera、IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果,IE7及以下也可以通过滤镜来实现渐变效果(滤镜来实现会消耗大量资源)

?为什么滤镜实现渐变效果会消耗大量资源      呵呵,菜鸟,什么都不懂,就只会百度了。见笑了。

原因是:由于IE内部在解析滤镜,也是通过大量的CPU计算,从而达到滤镜效果,最后再渲染。

二、各浏览器是如何实现渐变效果的

1、CSS3实现渐变背景的标准写法

background: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

  • []在正则中表示一个字符类,这里,你可以理解为一个小单元。
  • |表示候选。也就是“或者”的意思,要么前面的,要么就后面的。
  • ?为量词,表示0个或1个,言外之意就是,你可以不指定方向,直接渐变色走起。

 side-or-corner
side-or-corner中文意思就是“边或角”,可选值有:

[left | right] || [top | bottom]

color-stop
渐变关键颜色结点,语法为:
<color> [ <percentage> | <length> ]

Gecko内核的浏览器:    
background:-moz-linear-gradient(top, #CCC, #333);
Webkit内核的浏览器:
background:-webkit-gradient(linear, top, from(#CCC), to(#333));
IE8及以下通过滤镜实现:
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorStr='#CCC',endColorStr='#333');  /*IE滤镜实现渐变*/
其中,gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。
IE8+:
background: -ms-linear-gradient(#CCC 0%,#333 100%);

CSS3实现兼容性的渐变背景效果的更多相关文章

  1. 第161天:CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  2. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

  3. 深入理解css3中的线性渐变

    css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...

  4. css3属性兼容性

    来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...

  5. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  6. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  7. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  8. CSS实现兼容性的渐变背景(gradient)效果

    利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...

  9. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

随机推荐

  1. NS实现采用的技术大多是PHP,如果采用java、 .net是否同样适用?

    SNS采用的技术可不都是PHP (不局限于国内),特别是国外的新兴公司,基本上没有再用PHP的了,国内到还是蛮常用的.简单说说我知道的几个案例:Facebook (PHP):Facebook采用PHP ...

  2. shutdown computer in ad and ou

    1. powershell Shutdown-computer –computername (gc c:\temp\serverlist.txt) –force –throttlelimit 10 h ...

  3. Cocoapod安装 - 管理第三方库

    在我们开发移动应用的时候,一般都会使用到第三方工具,而由于第三方类库的种类繁多,我们在项目中进行管理也会相对麻烦,所以此时我们就需要一个包管理工具,在iOS开发中,我们使用最多的就是Cocoapods ...

  4. Android Camera 预览图像被拉伸变形的解决方法【转】

    问题描述: 预览图像被拉伸变形 问题原因: 由于预览图像大小跟SurfaceView 大小不一致引起 解决方法: 获取系统支持的所有预览尺寸[getSupportedPictureSizes],然后再 ...

  5. cmd下运行java文件时,找不到或无法加载主类的解决方法

    最近再看java,却被一个看似很基础的hellorworld头疼了十几分钟,百度了一下,若你在cmd下编辑及运行.java文件时报错,解决方案如下,如图所示:

  6. avalon中require的实现

    var plugins = { loader: function(builtin) { window.define = builtin ? innerRequire.define : otherDef ...

  7. Entity Framework快速入门--IQueryable与IEnumberable的区别(转载)

    IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口 ...

  8. 生意经:研究一下国外SAAS的产品线,比如Salesforce、Netsuite和Zendesk等等(Salesforce斥资7.5亿美元收购云计算字处理应用Quip)

    看他们做什么,我就做什么-甚至比他们做的更好. ------------------------------------------------------------ 新浪科技讯 北京时间8月3日下 ...

  9. 深入了解View实现原理以及自定义View详解

    下面几篇文章对View的原理讲的非常详细. Android LayoutInflater原理分析,带你一步步深入了解View(一) Android视图绘制流程完全解析,带你一步步深入了解View(二) ...

  10. 检查并创建目录mkdir

    os.listdir() os.path.isdir() os.path.join() os.mkdir() # -*- coding:utf-8 -*- import os,sys def mkdi ...