渐变

一、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. Oracle Solaris 11.2 Beta Firefox 17.0.6 添加 flashplayer 插件

    1.复制libflashplayer.so插件到路径:~/.mozilla/plugins/下.2.打开Firefox,在地址栏输入about:config.回车:在过滤器那一栏输入 plugin.e ...

  2. ORACLE 10G 闪回建议

    Flashback Tips The following tips and restrictions apply to using flashback features. Flashback Tips ...

  3. bash操作小结

    刚开始学写bash脚本,发现有很多需要注意的细节问题,在这里记录一下便于记忆: 1. help test  帮助 2. bash提供的数组数据结构,它是以数字为下标的,和C语言从0开始的下一样  参考 ...

  4. 使用GDB进行调试

    下面是几篇非常好的GDB使用指南: http://www.cs.cmu.edu/~gilpin/tutorial/ http://oss.org.cn/ossdocs/gnu/linux/gdb.ht ...

  5. Android Menu 主菜单是使用

    在Android里面每个Activity都绑定了一个Menu(菜单)有些时候我们需要使用到菜单.用法很简单,我们只需要重写onCreateOptionsMenu和onOptionsItemSelect ...

  6. pgadmin中的备份功能消失的原因和找回方法

    pgadmin在正常情况下,在左侧的[对象浏览器]中选中数据库.模式或者表时,右键会出现[备份]和[恢复]的选项(除早期不支持该功能的版本外). 如: 当然,有时候有人会发现,当你想要用这些备份还原功 ...

  7. 使用jna调用dll,jdk位数和dll位数的关系

    最近在学习jna,发现dll文件能能否成功调用取决于jdk位数. 32位jdk只能使用32位的dll,64位jdk只能使用64位的dll,否则位数不对应的话报的错是 "Exception i ...

  8. TStringList TMemo Text与Add赋值的区别 Memo.Text赋值高度注意事项,不得不知的技巧。

    Memo.Text赋值高度注意事项,不得不知的技巧. list := TStringList.Create;  list.Text:= str:  list.Count; list.Clear;  l ...

  9. <COM原理和应用>第七章的ITextObject代码是什么?

      第7章中有如下的描述:-----------------------------------为了在程序中使用"Text.Object"文本对象,我们利用ClassWizard引 ...

  10. iOS出现<object returned empty description>的解决方法

    iOS出现<object returned empty description>的解决方法: 使用  [str length] <= 0  判断处理