<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Linear</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <style>

        div {

            width: 400px;

            height: 100px;

            background-color: #0a0;

            border-radius: 5px;

            background-image: -webkit-linear-gradient(#0c0, #0a0);

            background-image: -moz-linear-gradient(#0c0, #0a0);

            background-image: -ms-linear-gradient(#0c0, #0a0);

            background-image: -o-linear-gradient(#0c0, #0a0);

            background-image: linear-gradient(#0c0, #0a0);

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

CSS3 线型渐变的更多相关文章

  1. 关于CSS3线型渐变这些事儿

    CSS3兼容各浏览器的线型渐变方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  3. CSS3技巧：利用css3径向渐变做一张优惠券（转）

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  4. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

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

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

  6. CSS3背景渐变。。。

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

  7. 超多的CSS3圆角渐变网页按钮

    <!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...

  8. css3背景渐变以及图片混合渲染模式（一）

    一.CSS3 渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(g ...

  9. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

随机推荐

  1. vi 使用教程

    编辑一个文本文件是经常使用到的计算机操作.我们想做的大多数事情都需要使用某种文件编辑.文本编辑器会方便文件的创建和修改.编辑一个文本文件是经常使用到的计算机操作.我们想做的大多数事情都需要使用某种文件 ...

  2. **ERROR: Ninja build tool not found.

    | if which ninja-build ;\| then \| ln -s `which ninja-build` bin/ninja ;\| else \| echo "***ERR ...

  3. web-service客户端与服务器端的连接

    1 首先讲解下xfire XFire是新一代的Java Web服务引擎,XFire使得在JavaEE应用中发布Web服务变得轻而易举.和其他Web服务引擎相比,XFire的配置非常简单,可以非常容易地 ...

  4. 在idea的maven项目使用el或jstl表达式

    必须加上这句: <%@ page isELIgnored="false" %> 否则无法解析el或jstl表达式 <%@ taglib prefix=" ...

  5. hdu 5344 MZL's xor

    MZL's xor Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  6. GCC: compilation process..

    gcc -Iproj/src myfile.c -o myfile gcc -c myfile.c "compile without linking gcc -D DEBUG myfile. ...

  7. HDU 4027 <线段树，区间√>

    题目连接 题意 给出一个区间,每次把[l,r]内的值√,维护区间和. 坑: £:l会比r大,swap. £: 当f[i].sum=f[i].r-f[i].l+1;,不修改.因为保证每个数都大于等于1, ...

  8. UITableView使用中的一些刁专问题总结

    tableview中cell的系统分隔线问题(分隔线顶满或者缩短) //tableview代理方法,设置系统cell的分隔线 -(void)tableView:(UITableView *)table ...

  9. Android 开发——如何显示 GIF 动画

    gif 图动画在 android 中还是比较常用的,比如像新浪微博中,有很多 gif 图片,而且展示非常好,所以我也想弄一个.经过我多方的搜索资料和整理,终于弄出来了,其实 github 上有很多开源 ...

  10. sql日期

    当我们处理日期时,最难的任务恐怕是确保所插入的日期的格式,与数据库中日期列的格式相匹配. 只要您的数据包含的只是日期部分,运行查询就不会出问题.但是,如果涉及时间部分,情况就有点复杂了. 在讨论日期查 ...