<!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. WEBROOT根目录 <%=request.getContextPath()%>

    WEBROOT根目录 <%=request.getContextPath()%> == ${pageContext.request.contextPath}

  2. eclipse添加桌面快捷方式

    linuxmint系统 输入sudogedit /usr/share/applications/eclipse.desktop,在打开的文件中输入以下参数: [Desktop Entry] Encod ...

  3. IOS传值之Block传值（二）

    @interface QWViewController : UIViewController @property(nonatomic,strong)UILabel *label; @property( ...

  4. struts2获取请求参数的三种方式及传递给JSP参数的方式

    接上一篇文章 package test; import com.opensymphony.xwork2.ActionSupport; import javax.servlet.http.*; impo ...

  5. SCP测试服务器的上行/下行带宽

    SCP测试服务器的上行/下行带宽,这个咋弄呢?有时间再研究一下.

  6. 关于jQuery的条件判断问题

    遇到的第一个问题,点击第一行用toggle实现背景的变换,需要在toggle函数里面判断,当下面显示的时候是一个状态,下面不显示的时候是另一个状态,我用了 if($(".check-box& ...

  7. Swift 与 JSON 数据

    转载自: http://www.cnblogs.com/theswiftworld/p/4660177.html 我们大家平时在开发 App 的时候,相信接触最多的就是 JSON 数据了.只要你的 A ...

  8. iOS5新特性: Core Image 示例

    iOS5给我们带来了很多很好很强大的功能和API.Core Image就是其中之一,它使我们很容易就能处理图片的各种效果,色彩啊,曝光啊,饱和度啊,变形啊神马的. 可惜苹果一直没能完善官方文档,也没有 ...

  9. Break on _NSLockError() to debug.

    *** -[NSCondition dealloc]: condition (<NSCondition: 0x1039a450> '(null)') deallocated while s ...

  10. Android中购物车的全选、反选、问题和计算价格

    此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...