css3的背景颜色渐变@线性渐变

时间：2022-09-17 20:11:40

背景颜色渐变之线性渐变

　　　　语法形式： 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的背景颜色渐变@线性渐变的更多相关文章

  1. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  2. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  3. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  4. 【01】CSS3 Gradient 分为&&num;160&semi;linear-gradient（线性渐变）和&&num;160&semi;radial-gradient（径 向渐变）（转）

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

  5. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

  6. CSS3实现背景颜色渐变 摘抄

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  7. CSS3学习之linear-gradient（线性渐变）

    转自:http://www.cnblogs.com/rainman/p/5113242.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使 ...

  8. CSS3 线性渐变linear-gradient

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...

  9. 使用CSS3创建文字颜色渐变&lpar;CSS3 Text Gradient&rpar;

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

随机推荐

  1. MFC 修改各种控件的背景颜色、字颜色和字体

    今天主要总结一下有关MFC 中静态编辑框(StaticEdit).编辑框(Edit)和按钮(Button)的背景颜色.字颜色和字体. 我的程序运行结果如下: 由上图我们知道修改的地方有:1.把Stat ...

  2. java高级规范之一

    一.不允许使用汉语拼音命名 不规范示例: public void zengjiaYongHu{}//拼音方法名称 规范示例: public void addUser(){} 解析:应该使用国际化语音, ...

  3. SVN Cornerstone 报错信息 xcodeproj cannot be opened because the project file cannot be parsed&period;

    svn点击update 之后,打开xcode工程文件,会出现  xxx..xcodeproj  cannot be opened becausethe project file cannot be p ...

  4. js跳转到页面中指定的hash

    location.hash = "#filter_moreClue";

  5. 使用Morphia框架操作mongodb

    1.  mac 下 安装mongodb sudo brew update sudo brew install mongodb sudo brew services mongodb start 2.   ...

  6. JTextPane 的 undo 、 redo

    实现文本框输入内容的单条记录撤销,重做,通过按钮实现 以及通过JList的多条撤销.重做操作(类似PS) 昨天还在为自己写不出代码怎么办而伤心,没想到今天上午就实现了,并且还完善了功能: 可以在撤销一 ...

  7. C&num; 后台调用script使用类

    在网站的开发的时候,总是会用到一些前台的提示的script的代码,从项目中整理了一份常用的方法. public class Jscript { public Jscript() { // // TOD ...

  8. POJ 1251 Jungle Roads（最小生成树）

    题意  有n个村子  输入n  然后n-1行先输入村子的序号和与该村子相连的村子数t  后面依次输入t组s和tt s为村子序号 tt为与当前村子的距离  求链接全部村子的最短路径 还是裸的最小生成树咯 ...

  9. xadmin自定义关联菜单

    网上好多自定义xadmin后台数据很少有关怎样设置外键关联菜单的显示,如下图所示: 现有个需求根据model中status字段值,来显示关联菜单三道杠,如上图app状态只有是审核成功才会显示,未审核不 ...

  10. svn出现skips remain conficted，不能更新代码问题

    出现: skips remain conficted One or more files are in a conflicted state 然后commit的时候出现,很多都已经deleted,但是 ...

相关文章