CSS3之背景色渐变
在css2时代,页面背景色渐变,按钮背景渐变效果主要是通过图片实现,css3中可通过 gradient 实现背景色渐变,图片作为一种资源,每次在页面加载时都要从服务器下载,这样如果页面很大需要渐变的效果很多的话,势必会造成网络堵塞,给页面加载造成压力,然而如果用css3的gradient写的话,在页面加载css文件时就会通过解析css代码实现渐变效果,就像解析css2代码一样。
但是美中不足的时,各浏览器虽然支持CSS3的gradient,却不能达成统一意见,完美的写法是在gradient前加上各浏览器的前缀,如-webkit-,-moz -,IE8以上浏览器可通过IE自带的滤镜实现渐变功能。尽管如此,像低于IE8浏览器的这些古董,虽然已被世界范围内的市场淘汰,但作为中国的IT程序员,我们依然不能放弃,因为IE6,7还占据着中国的半壁江山,最后只能通过图片来实现。虽然这样会对编码的复杂度带来一些影响,但是对于完美支持css3的浏览器还是会带来全新的体验。
一. Webkit浏览器
(1) 第一种写法:
background:-webkit-gradient(linear ,10% 10%,100% 100%,color-stop(0.14,rgb(255,0,0)), color-stop(0.5,rgb(255,255,0)), color-stop(1,rgb(0,0,255)) );
第一个参数:表示的是渐变的类型
linear线性渐变
第二个参数:分别对应x,y方向渐变的起始位置
第三个参数:分别对应x,y方向渐变的终止位置
第四/五/N个参数:设置渐变的位置及颜色
(2)第二种写法:这种写法比较简单,而且效果比较自然
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2074af), to(#2c91d2));
第一个参数:表示的是渐变的类型
linear线性渐变
第二个参数:分别对应x,y方向渐变的起始位置
第三个参数:分别对应x,y方向渐变的终止位置
第四个参数:设置了起始位置的颜色
第五个参数:设置了终止位置的颜色
二.Mozilla浏览器
(1)第一种写法:
background:-moz-linear-gradient(10 10 90deg, rgb(25,0,0) 14%, rgb(255,255,0) 50%, rgb(0,0,255) 100%);
第一个参数:设置渐变起始位置及角度
第二/三/四/N个参数:设置渐变的颜色和位置
(2)第二种写法:这种写法比较简单,而且效果比较自然
background:-moz-linear-gradient(top, #FFC3C8,#FF9298);
第一个参数:设置渐变的起始位置
第二个参数:设置起始位置的颜色
第三个参数:设置终止位置的颜色
三.IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现
IE9 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
IE8 -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
第一个参数:渐变起始位置的颜色
第二个参数:渐变终止位置的颜色
第三个参数:渐变的类型
0 代表竖向渐变 1 代表横向渐变
P.S.这里设置背景的时候不需要给background设置,直接用filter即可,不要和其他的浏览器混淆
gradient中除了线性渐变linear以外,还有一种径向渐变radial,但是径向渐变应用的地方很少,我在项目开发中到现在还没用过,关于gradient渐变,给大家推荐一个网站:http://www.w3cplus.com/content/css3-gradient
CSS3之背景色渐变的更多相关文章
- css 背景色渐变---和背景色透明
1 背景色渐变 background:#fb0000; background: -webkit-gradient(linear, left top, left bottom, color-stop(0 ...
- 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>
表格标签 <table> 代表表格 width:指表格的宽度 一种是像素 (浏览器缩小的时候出现滚动条) 一种是百分比(跟着浏览器的大小而大小) b ...
- CSS3的线性渐变(linear-gradient)
CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div ...
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- css中的背景色渐变以及背景图的定位
单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd) ...
- CSS3下的渐变文字效果实现
如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
- CSS3透明背景+渐变样式
CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...
- 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 ...
- jquery animate()背景色渐变的处理
jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: ...
随机推荐
- 图片以BLOB存储在后台数据库中,Android客户端要进行读取显示
解决方法: 1:在后台以InputStream的方式将图片从数据库中读出: public static InputStream getPicInputStream(){ String id = &qu ...
- HDU 4411 Arrest
http://www.cnblogs.com/jianglangcaijin/archive/2012/09/24/2700509.html 思路: S->0 流量为K费用0 0->i 流 ...
- ASP.NET MVC3快速入门——第四节、添加一个模型
在本节中我们将追加一些类来管理数据库中的电影.这些类将成为我们的MVC应用程序中的“模型”部分.我们将使用一个.NET Framework的被称之为“Entiry Framework”的数据访问技术来 ...
- 《Programming WPF》翻译 第8章 3.Storyboard
原文:<Programming WPF>翻译 第8章 3.Storyboard Storyboard是动画的集合.如果你使用了标记,所有的动画必须要被定义在一个Storyboard中.(在 ...
- Java连接Oracle数据库的示例代码
最基本的Oracle数据库连接代码(只针对Oracle11g): 1.右键项目->构建路径 ->配置构建路径,选择第三项“库”,然后点击“添加外部Jar”,选择 “D:\Oracle\ap ...
- drwtsn32.exe 遇到问题须要关闭。我们对此引起的不便表示抱歉
我的机器老是这样.启动起来就有这个... 那位高手能告诉我这是怎么会事.故障的原因以及解决的办法. 最佳答案 drwtsn32.exe是windows的一项磁盘检查程序,同一时候也是鸡肋程序,最好的办 ...
- Linux 终端訪问 FTP 及 上传下载 文件
今天同事问我一个问题,在Linux 下訪问FTP,并将文件上传上去. 我之前一直是用WinSCP工具的. 先将文件从linux copy到windows下,然后在传到ftp上. google 一下. ...
- 某APK中使用了动态注册BroadcastReceiver,Launcher中动态加载此APK出现java.lang.SecurityException异常的解决方法
在某APK中,通过如下方法动态注册了一个BroadcastReceiver,代码参考如下: @Override protected void onAttachedToWindow() { super. ...
- Hook linux 网络封包
要注册一个hook函数需要用到nf_register_hook()或者nf_register_hooks()系统API和一个struct nf_hook_ops{}类型的结构体对象 一个简单的demo ...
- mysql、添加和删除用户、添加权限
创建用户 mysql>insert into mysql.user(Host,User,Password) values("localhost","tes ...