css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变
语法形式： firefox浏览器 background：-moz-linear-gradient(position/deg，startColor，endColor);
opera浏览器 background: -o-linear-gradient(position/deg,startColor,endColor);
safari和chrome浏览器 background: -webkit-linear-gradient(position/deg,startColor,endColor);//新版本
在ie下主要通过滤镜实现。？？
事例：第一个参数为角度或者top、left等位置参数，但是因为top、left的变化较单一，所以一般使用角度作为参数，更利于实现多种渐变。
<!DOCTYPE html>
<html>
<head>
<title>css3</title>
</head>
<style type="text/css">
.example{
width:100%;
height:500px;
background: linear-gradient(45deg,red,blue);
background: -webkit-linear-gradient(45deg,red,blue);
background: -o-linear-gradient(45deg,red,blue);
background: -moz-linear-gradient(45deg,red,blue);
}
</style>
<body>
<div class="example">
111
</div>
</body>
</html>
当指定的角度时，该角度为一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右水平渐变，而90度将创建一个从底部到顶部的垂直渐变。
参考：http://www.w3cplus.com/content/css3-gradient
css3的背景颜色渐变@线性渐变的更多相关文章
- css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- CSS3实现背景颜色渐变
CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...
- CSS3实现背景颜色渐变 摘抄
一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...
- CSS3学习之linear-gradient（线性渐变）
转自:http://www.cnblogs.com/rainman/p/5113242.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使 ...
- CSS3 线性渐变linear-gradient
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
随机推荐
- Objective C ARC 使用及原理
手把手教你ARC ,里面介绍了ARC的一些特性, 还有将非ARC工程转换成ARC工程的方法 ARC 苹果官方文档 下面用我自己的话介绍一下ARC,并将看文档过程中的疑问和答案写下来.下面有些是翻译,但 ...
- LeetCode 135 Candy(贪心算法）
135. Candy There are N children standing in a line. Each child is assigned a rating value. You are g ...
- 在osx下通过vmware无GUI方式运行centos 7
启动虚拟机: /Applications/VMware\ Fusion.app/Contents/Library/vmrun -T fusion start "CentOS 64-bit.v ...
- 自己用C语言写PIC32 serial bootloader
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 从15年12月份以来我 ...
- js语言精粹读书笔记一
一.语法 1.
- Python-lambda函数，map函数，filter函数
lambda函数主要理解: lambda 参数:操作(参数). lambda语句中,冒号前是参数,可以有多个,用逗号隔开,冒号右边的返回值.lambda语句构建的其实是一个函数对象 map函数: ma ...
- 机器学习中的算法(1)-决策树模型组合之随机森林与GBDT
版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...
- How to Programmatically Impersonate Users in SharePoint
Sometimes when creating SharePoint web or console applications, you may need to execute specific c ...
- iOS开发中获取文本的宽高的方式
/** 计算单行文字的size @parms 文本 @parms 字体 @return 字体的CGSize */ + (CGSize)sizeWithText:(NSString *)text ...
- HBase学习
记录HBase的学习过程.之后会陆续添加内容. 阅读hbase的博客,理解hbase是什么.推荐博文: 1,HBase原理,基础架构,基础概念 2,HBase超详细介绍 --------------- ...