纯CSS的颜色渐变效果
本例展示了一个纯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的颜色渐变效果的更多相关文章
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 纯CSS打造银色MacBook Air(完整版)
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
- 使用纯 CSS 实现滚动阴影效果
开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 利用target的特性,可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 熟悉css/css3颜色属性
颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
随机推荐
- C# DllImport的用法
大家在实际工作学习C#的时候,可能会问:为什么我们要为一些已经存在的功能(比如Windows中的一些功能,C++中已经编写好的一些方法)要重新编写代码,C#有没有方法可以直接都用这些原本已经存在的功能 ...
- 【原】Object 异常静态
//所有的类都继承Object类: Object a=; Object b="ddfasfda"; //正常情况下,都会省略掉:Object:但实际上是存在的: class tes ...
- Python 基础篇:编码、变量、模块
1. 编码 python解释器在加载 .py 文件中的代码时,会对内容进行编码(默认ASCII). 2. 变量 变量定义的规则: 变量名只能是 字母.数字或下划线的任意组合 变量名的第一个字符不能是数 ...
- windows下常用快捷键
windows下常用快捷键: 显示桌面: win徽标+D 打开资源管理器: win徽标+E 打开任务管理器: Ctrl+Alt+delete 任务切换: Alt+Tab 应用程序中窗口之间的切换: C ...
- 【Error listenerStart】 Error listenerStart Context [] startup failed due to previous errors
发给 报错信息 八月 12, 2015 11:58:19 上午 org.apache.coyote.AbstractProtocol start 信息: Starting ProtocolHandle ...
- js函数语法
<script type="text/javascript"> //1 普通方法 /* * function 方法名(参数){ * 方法体 * ...
- iOS工程引入ios-charts-master
前一段时间看到一个非常好的例子ios-charts-master,想在自己的工程中引用,但是一直没有成功,即使把整个工程原封不动的搬过来仍然,无济于事. 经过一次意外研究,终于成功了. 特记下集成过程 ...
- webkit私有css3属性 -webkit-overflow-scrolling:touch;
-webkit-overflow-scrolling:touch;/*允许独立的滚动区域和触摸回弹*/ 这个属性可以提高滚动的平滑度
- [JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- 1006: [HNOI2008]神奇的国度
图上的最小的染色方案: 学习了陈丹绮的论文: MCS算法 #include<cstdio> #define maxn 10005 #define maxm 2000005 using na ...