渐变

一、CSS3的径向渐变

效果图网址:http://www.spritecow.com 图像拼接技术

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

html代码:

 <h1>Hold the front page</h1>
<p>Now you get the nitty-gritty of the story.</p>
<p>The most important information is delivered first.</p>
<h1>Extra!Extra!</h1>
<p>Further developments are unfolding.</p>
<p>You can read all about it here.</p>

css代码:

 *{margin:; padding:;}
html{ height:100%;
background:-webkit-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);
background: -moz-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);
background: -ms-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)
background: -o-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)}
body{ background:url(index.png); height:100%; color:#3CC;}

注释:radial:[ˈreɪdiəl] 径向的。  gradient:[ˈgreɪdiənt] 倾斜,梯度,陡度。circle:['sɜ:kl] 圆

二、线性渐变在Mozilla下的应用

语法:

 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示:

根据上面的介绍,我们先来看一个简单的例子:

HTML:

 <div class="example example1"></div>

CSS:

 .example { width: 150px;  height: 80px; }

现在我们给这个div应用一个简单的渐变样式:

 .example1 {
background: -moz-linear-gradient( top,#ccc,#000);
}

效果如下:

注:这个效果暂时只有在Mozilla内核的浏览器下才能正常显示。

纯css径向渐变(CSS3--Gradient)的更多相关文章

  1. 深入理解CSS径向渐变radial-gradient

    × 目录 [1]定义 [2]椭圆圆心 [3]椭圆类型 [4]椭圆大小 [5]色标 [6]重复渐变 [7]其他 前面的话 上篇介绍了线性渐变,本文接着介绍径向渐变的内容 定义 径向渐变,实际上就是椭圆渐 ...

  2. CSS径向渐变radial-gradient

    可以做一些效果,不错! 网址:http://www.cnblogs.com/xiaohuochai/p/5383285.html

  3. 前端每日实战:35# 视频演示如何把 CSS 径向渐变用得出神入化,只用一个 DOM 元素就能画出国宝熊猫

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odKrpy 可交互视频教程 此视频 ...

  4. css 径向渐变

    .example { width: 150px; height: 80px; background: -webkit-radial-gradient(red, green, blue); /* Saf ...

  5. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  6. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  7. CSS3 Gradient渐变效果

    最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  8. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  9. CSS渐变之CSS3 gradient在Firefox3.6下的使用

    一.引子 Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变. 如果你正在运行的Firefox 3.6的最新测试版,你应该看看我们的互动演示,并查看相应的代码.使用单选按钮来 ...

随机推荐

  1. InnoDB: Error number 24 means ‘Too many open files’.--转载

    一.问题的描述 备份程序 执行前滚的时候报错.(-apply-log) InnoDB: Errornumber 24 means 'Too many open files'. InnoDB: Some ...

  2. PHP递归实现层级树状展现数据

    树状数据展现很常用,今天学习了PHP的递归,也来总结总结! PHP代码: function _getTreeList_custom1($data,$parent_id,$depth) { $retur ...

  3. 在HttpClient请求的时候,返回结果解析时出现java.io.IOException: Attempted read from closed stream. 异常,解决

    原因是EntityUtils.toString(HttpEntity)方法被使用了多次.所以每个方法内只能使用一次.

  4. 创建Android项目时出错——No resource found that matches the given name 'Theme.AppCompat.Light'

    创建Android项目时出错,error: Error retrieving parent for item: No resource found that matches the given nam ...

  5. Android之下拉刷新,上啦加载的实现(一)

    转载地址http://blog.csdn.net/leehong2005/article/details/12567757#t5 前段时间项目中用到了下拉刷新功能,之前在网上也找到过类似的demo,但 ...

  6. Android之使用Android-AQuery异步加载图片(一)

    第一节:转载地址(http://www.cnblogs.com/lee0oo0/archive/2012/10/25/2738299.html) // 必须实现AQuery这个类 AQuery aq ...

  7. 主机名链接数据库,无法生成 SSPI 上下文

    两台Server,环境一样,都使用同一域账号. 1的SQL Server可以通过Windows认证连接到2,但2通过Windows认证连接1时报如下错误: 目标主体名称不正确,无法生成 SSPI 上下 ...

  8. Python str方法总结

    1.返回第一个字母大写 S.capitalize(...) S.capitalize() -> string 1 2 3 4 >>>a = 'shaw' >>> ...

  9. 一个前辈对FPGA的理解

    接下来对比一下我原来和现在对于FPG A的认识:原来从单片机转型到FPG A时,并没有摸清这趟河水的深浅,而在不知深浅的情况下,我已经开始下水了.当时我认为FPG A和单片机一样,它是由一个超级经典的 ...

  10. JQuery this 和 $(this) 详解

    this  this 在面向对象语言中,指代调用上下文对象,在js中,也是一模一样的概念,所以不管这个this出现在什么地方,只要追踪到当前调用对象是什么,那么this是什么也就一目了然了. 先看一个 ...