.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. Internal Server Error with LAMP

    文章出自:http://blog.csdn.net/lipei1220/article/details/8186406 我的问题:  500  添加 .htaccess 后刷新网页就出现错误. 原因为 ...

  2. [LeetCode] 01 Matrix 题解

    题意 # 思路 我一开始的时候想的是嘴 # 实现 ```cpp // // include "../PreLoad.h" class Solution { public: /** ...

  3. MVC不用302跳转Action,内部跳转

    原理,在一个Action里面return 另一个Action出去. public class HomeController : Controller { // GET: Home public Act ...

  4. JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

    一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...

  5. ArrayList去除重复元素(包括字符串和自定义对象)

    1.去除重复字符串 package com.online.msym; import java.util.ArrayList; import java.util.Iterator; @SuppressW ...

  6. JavaScript实现

    JavaScript实现 Javascript实现虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多.没错, ...

  7. Spring 框架原理

    [spring框架原理] Spring框架原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 写给读者的话 ------亲爱的读者感谢您对小编的支持,当我正值 ...

  8. scss语法介绍

    这里既然是对语法的介绍,那么至于如何安装和编译scss我就不多少了,主要是因为本人在群里认识的小伙伴有的不会用scss,所以就借着放假的机会来对scss语法做个总结,博主在开发过程中用scss蛮多,所 ...

  9. 微服务架构的简单实现-Stardust

    微服务架构,一个当下比较火的概念了.以前也只是了解过这方面的概念,没有尝试过.想找找.NET生态下面是否有现成的实现,可是没找到,就花了大半个月的闲暇时间,遵循着易用和简单,实现了一个微服务框架,我叫 ...

  10. [深入学习Redis]RedisAPI的原子性分析

    在学习Redis的常用操作时,经常看到介绍说,Redis的set.get以及hset等等命令的执行都是原子性的,但是令自己百思不得其解的是,为什么这些操作是原子性的? 原子性 原子性是数据库的事务中的 ...