css3线性渐变兼容
火狐浏览器:
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
谷歌:
.l6{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); } 谷歌10+
.l7{background: -webkit-gradient(linear, left top, right top, color-stop(0%,#30c6e0), color-stop(100%,#1e77db));} 谷歌1-9
不带前缀:
.l1{background: linear-gradient(to bottom, blue 2%, white 50%, orange);}
.l2{background: linear-gradient(to bottom right, blue 2%, white 50%, orange);}
.l3{background: linear-gradient(20deg, blue 2%, white 50%, orange);}
多个背景
.l5{background:url(http://pinqu.qiniudn.com/sq_daas_c5caf34a66473182975d1595c623a037) no-repeat 0 0/100% 100%;}
.l4{background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://pinqu.qiniudn.com/sq_daas_c5caf34a66473182975d1595c623a037) no-repeat 0 0/100% 100%;}
参考来源:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html
css3线性渐变兼容的更多相关文章
- css3 线性渐变和径向渐变
线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...
- 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)
原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...
- css线性渐变兼容
css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...
- CSS3 线性渐变(linear-gradient) 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
- CSS3 线性渐变linear-gradient
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...
- 使用CSS3线性渐变实现图片闪光划过效果
<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...
- CSS3线性渐变linear-gradient
转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...
- CSS3 线性渐变(linear-gradient)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
- CSS3线性渐变和径向渐变
background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...
随机推荐
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- 修改Oracle SGA,以提高oracle性能
在正常情况下,查询非常慢. 1.检查SGA大小,以DBA身份连接到oracle数据库,输入show sga. 2.如果SGA过小,请修改其大小 修改SGA必须保持的原则 1).sga_target不能 ...
- initramfs扫描磁盘前改变磁盘上电顺序
背景: 机械硬盘需要12V 5V电源,此前设计是硬件电路默认5V有效.12V无效,然后系统通过驱动上12V电,对磁盘来说相当于先上5V后上12V,这种方式对大部分磁盘是可以的,但对于日立 HGST磁盘 ...
- 从0开始学习 GitHub 系列汇总笔记
本文学习自Stromzhang, 原文地址请移步:从0开始学习 GitHub 系列汇总 我的笔记: 0x00 从0开始学习GitHub 系列之[初识GitHub] GitHub 影响力 a.全球顶级 ...
- partition by和group by对比
今天大概弄懂了partition by和group by的区别联系. 1. group by是分组函数,partition by是分析函数(然后像sum()等是聚合函数): 2. 在执行顺序上, 以下 ...
- go的timer定时器实现
示例如下: package main import ( "fmt" "time" ) func testTimer1() { go func() { fmt.P ...
- 14 nginx 中配置 expires缓存提升网站负载
一:nginx 中配置 expires缓存提升网站负载 对于网站的图片,尤其是新闻站, 图片一旦发布, 改动的可能是非常小的.我们希望 能否在用户访问一次后, 图片缓存在用户的浏览器端,且时间比较长的 ...
- Android TextView setText卡顿问题
TextView 是经常使用控件之中的一个,最经常使用的方法是setText() . 可是 我们在显示大量的文本的时候,使用setText还是会有一些性能的问题. 这篇文章 关于TextView的s ...
- Android-DrawerLayout介绍
DrawerLayout已经出来非常久了,个人认为国内的app都深受ios的毒害在设计上都争先模仿ios的风格,都忘了什么是独特的Android风格.自己得先学的然后跟产品争取在项目中使用上一系列的A ...
- ASP.NET动态网站制作(10)-- JQ(2)
前言:jq的第二节课. 内容: 1.管理选择结果: (1)获取元素个数:$("img").size():获取页面中所有“img”个数: (2)提取元素:$("img[ ...