CSS3实现兼容性的渐变背景效果
一、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(
#CCC0%
,
#333100%
);
CSS3实现兼容性的渐变背景效果的更多相关文章
- 第161天:CSS3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...
- 【转】CSS实现兼容性的渐变背景(gradient)效果
一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...
- 深入理解css3中的线性渐变
css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...
- css3属性兼容性
来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
- css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...
- css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...
- CSS实现兼容性的渐变背景(gradient)效果
利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...
- CSS3实现背景颜色渐变
CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...
随机推荐
- NS实现采用的技术大多是PHP,如果采用java、 .net是否同样适用?
SNS采用的技术可不都是PHP (不局限于国内),特别是国外的新兴公司,基本上没有再用PHP的了,国内到还是蛮常用的.简单说说我知道的几个案例:Facebook (PHP):Facebook采用PHP ...
- shutdown computer in ad and ou
1. powershell Shutdown-computer –computername (gc c:\temp\serverlist.txt) –force –throttlelimit 10 h ...
- Cocoapod安装 - 管理第三方库
在我们开发移动应用的时候,一般都会使用到第三方工具,而由于第三方类库的种类繁多,我们在项目中进行管理也会相对麻烦,所以此时我们就需要一个包管理工具,在iOS开发中,我们使用最多的就是Cocoapods ...
- Android Camera 预览图像被拉伸变形的解决方法【转】
问题描述: 预览图像被拉伸变形 问题原因: 由于预览图像大小跟SurfaceView 大小不一致引起 解决方法: 获取系统支持的所有预览尺寸[getSupportedPictureSizes],然后再 ...
- cmd下运行java文件时,找不到或无法加载主类的解决方法
最近再看java,却被一个看似很基础的hellorworld头疼了十几分钟,百度了一下,若你在cmd下编辑及运行.java文件时报错,解决方案如下,如图所示:
- avalon中require的实现
var plugins = { loader: function(builtin) { window.define = builtin ? innerRequire.define : otherDef ...
- Entity Framework快速入门--IQueryable与IEnumberable的区别(转载)
IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口 ...
- 生意经:研究一下国外SAAS的产品线,比如Salesforce、Netsuite和Zendesk等等(Salesforce斥资7.5亿美元收购云计算字处理应用Quip)
看他们做什么,我就做什么-甚至比他们做的更好. ------------------------------------------------------------ 新浪科技讯 北京时间8月3日下 ...
- 深入了解View实现原理以及自定义View详解
下面几篇文章对View的原理讲的非常详细. Android LayoutInflater原理分析,带你一步步深入了解View(一) Android视图绘制流程完全解析,带你一步步深入了解View(二) ...
- 检查并创建目录mkdir
os.listdir() os.path.isdir() os.path.join() os.mkdir() # -*- coding:utf-8 -*- import os,sys def mkdi ...