本例展示了一个纯css渐变的效果、其兼容IE6以上浏览器等各主流浏览器:

案例效果:查看演示

代码如下:

css:

*{margin:0;padding:0;}
.linear{
width:100%;
height:600px;
background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/
background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #15A216),color-stop(1, #fafafa));/* Safari & Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa'); /*IE6 & IE7*/
}

body:

<div class="linear"></div>

  

纯CSS的颜色渐变效果的更多相关文章

  1. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  2. 纯CSS打造银色MacBook Air(完整版)

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

  3. 使用纯 CSS 实现滚动阴影效果

    开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...

  4. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  6. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  7. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  8. 熟悉css/css3颜色属性

    颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...

  9. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

随机推荐

  1. windows 7 64bit 下apache php mysql 环境配置

    在64位环境下安装apache,php和配置过程 准备好安装包.(64位版本) Apache 下载地址:http://www.apachelounge.com/download/ Php 下载地址:h ...

  2. keil 51警告编译优化

    KeilC51中将工程中没有调用的函数不进行编译的方法 把Target Options中的Device页中选上"Use Extended Linker(LX51)instead of BL5 ...

  3. Ajax简单实现文件异步上传的多种方法

    1. 认识FormData对象 FormData是Html5新加进来的一个类,可以模拟表单数据 构造函数 FormData (optional HTMLFormElement form) (可选) 解 ...

  4. Mongodb使用总结

    学习Mongodb已经有半年多了,为啥学习它,工作需要啊.好了,废话不说,总结在实际项目应用中的几点问题. 学习总结 首先,mongodb基本上既照顾到了sql某些语法,又有nosql的许多优点.入门 ...

  5. JSP页面之${fn:}内置函数

    函数列表: 函数名 函数说明 使用举例 fn:contains 判断字符串是否包含另外一个字符串 <c:if test="${fn:contains(name, searchStrin ...

  6. 从Clarifai的估值聊聊深度学习

    从Clarifai的估值聊聊深度学习 [转载请注明出处] 前几天和 Ayden @叶瀚中 聊天时,提到了 www.clarifai.com 这家公司. 此前,我已经从各方消息中听说过创始人Matt Z ...

  7. 从ng-repeat到NgFor

    看这篇文章基本明白怎么渲染模板,但是我的工程会报错说#号非法,这篇的写法也不好用. angular2.0.0的语法集: Angular for TypeScript 语法快速指南 (基于2.0.0版本 ...

  8. Linux下eclipse的安装以及配置

    在安装好jdk并配置好后,就可以进行eclipse的安装了,其步骤如下: 1.下载eclipse 我所用的eclipse为:eclipse-dsl-juno-SR1-linux-gtk.tar 2. ...

  9. SQLServer数据类型与C#类型对照表

    这是我在开发多层体系结构时遇到的问题,由于VS.NET尚不支持各种数据类型的空值即null, 放入实体类中在各个层之间作为参数传递,所以经查询参考SQL Server 2000的联机丛书和.NET的M ...

  10. POJ2299+逆序数

    归并排序!!!!!!!!!! /* 归并排序+求逆序数 */ #include<stdio.h> #include<string.h> #include<algorith ...