.example1 {
width: 150px;
height: 80px;
background: -moz-linear-gradient( top,#ccc,#000);
       background: -o-linear-gradient( top,#ccc,#000);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ccc, endColorstr=#000);//ie

-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#ccc,endColorstr=#000)";
}

效果如下:

  

老式写法

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

参考:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

css3---线性渐变的更多相关文章

  1. 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

    原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...

  2. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

  3. CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

    一.线性渐变在 Mozilla 下的应用     语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...

  4. CSS3线性渐变linear-gradient

    转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...

  5. CSS3 线性渐变linear-gradient

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...

  6. CSS3 线性渐变(linear-gradient)

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

  7. css3 线性渐变和径向渐变

    线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...

  8. CSS3线性渐变和径向渐变

    background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...

  9. CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)

    摘自: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

  10. CSS3线性渐变

    万恶的IE!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. Android -- 自定义ScrollView实现放大回弹效果

    1,刚刚在别人开源的项目中看到了一个挺不错的用户体验,效果图如下: 2,那下面我们就来实现一下,首先看一下布局,由于一般只是我们包含头像的那部分方法,所以这里我们要把布局分成两部分,对应的布局文件效果 ...

  2. Mac 上的 outlook 一直让输入密码

    Mac 上的 outlook 即便输入了正确的密码,依然提示密码错误,让重新输入,需要输入多遍之后才能连上服务器. 出现这个问题的原因可能是证书过期了. 解决方式如下: 1.找到 2. 删掉 Exch ...

  3. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

  4. java与xml之间的转换(jaxb)

    使用java提供的JAXB来实现java到xml之间的转换,先创建两个持久化的类(Student和Classroom): Classroom: package com.model; public cl ...

  5. org.springframework.beans.factory.BeanDefinitionStoreException异常

    1.下面是我遇到的异常信息: 2017-03-25 18:01:11,322 [localhost-startStop-1][org.springframework.web.context.Conte ...

  6. 一键部署Kubernetes高可用集群

    三台master,四台node,系统版本为CentOS7 IP ROLE 172.60.0.226 master01 172.60.0.86 master02 172.60.0.106 master0 ...

  7. 无线接收信号强度(RSSI)那些事儿

    本文由嵌入式企鹅圈原创团队成员黄鑫供稿. 本文所述的原理适用于所有无线传输技术,只是用蓝牙来举例.应该说,嵌入式企鹅圈更加偏重于嵌入式和物联网.安卓技术原理方面的知识分享和传播,其次才是实践,尽管很多 ...

  8. 光环国际PRINCE2培训费是多少?

    光环国际学习PRINCE2新活动 第一重好礼:获得商务背包一个 第二重好礼:获得600元学习代金券一张 第三重好礼:获得高清流程图一张 活动时间:2017年3月20日-3月31日 PRINCE2 (P ...

  9. JSR330: DI

    JSR330 DI JSR 330 ,提供了一种可重用的.可维护.可测试的方式来获取Java对象.也称为Dependency Injection . DI应该都不陌生,因为它就是Spring core ...

  10. 使用VB6写一个自定义的进度信息框窗口

    一.起因说明 之前有些项目是用Access完成的,当时为了给用户显示一些进度信息,自制了一个进度信息窗体,类似下图所示: 随着项目不断变迁,需要将进度信息按阶段及子进度进行显示,并且出于代码封装的需求 ...