纯css径向渐变(CSS3--Gradient)
渐变
一、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)的更多相关文章
- 深入理解CSS径向渐变radial-gradient
× 目录 [1]定义 [2]椭圆圆心 [3]椭圆类型 [4]椭圆大小 [5]色标 [6]重复渐变 [7]其他 前面的话 上篇介绍了线性渐变,本文接着介绍径向渐变的内容 定义 径向渐变,实际上就是椭圆渐 ...
- CSS径向渐变radial-gradient
可以做一些效果,不错! 网址:http://www.cnblogs.com/xiaohuochai/p/5383285.html
- 前端每日实战:35# 视频演示如何把 CSS 径向渐变用得出神入化,只用一个 DOM 元素就能画出国宝熊猫
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odKrpy 可交互视频教程 此视频 ...
- css 径向渐变
.example { width: 150px; height: 80px; background: -webkit-radial-gradient(red, green, blue); /* Saf ...
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- CSS3渐变——径向渐变
上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...
- CSS3 Gradient渐变效果
最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...
- CSS3 Gradient
CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...
- CSS渐变之CSS3 gradient在Firefox3.6下的使用
一.引子 Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变. 如果你正在运行的Firefox 3.6的最新测试版,你应该看看我们的互动演示,并查看相应的代码.使用单选按钮来 ...
随机推荐
- Oracle Solaris 11.2 Beta Firefox 17.0.6 添加 flashplayer 插件
1.复制libflashplayer.so插件到路径:~/.mozilla/plugins/下.2.打开Firefox,在地址栏输入about:config.回车:在过滤器那一栏输入 plugin.e ...
- ORACLE 10G 闪回建议
Flashback Tips The following tips and restrictions apply to using flashback features. Flashback Tips ...
- bash操作小结
刚开始学写bash脚本,发现有很多需要注意的细节问题,在这里记录一下便于记忆: 1. help test 帮助 2. bash提供的数组数据结构,它是以数字为下标的,和C语言从0开始的下一样 参考 ...
- 使用GDB进行调试
下面是几篇非常好的GDB使用指南: http://www.cs.cmu.edu/~gilpin/tutorial/ http://oss.org.cn/ossdocs/gnu/linux/gdb.ht ...
- Android Menu 主菜单是使用
在Android里面每个Activity都绑定了一个Menu(菜单)有些时候我们需要使用到菜单.用法很简单,我们只需要重写onCreateOptionsMenu和onOptionsItemSelect ...
- pgadmin中的备份功能消失的原因和找回方法
pgadmin在正常情况下,在左侧的[对象浏览器]中选中数据库.模式或者表时,右键会出现[备份]和[恢复]的选项(除早期不支持该功能的版本外). 如: 当然,有时候有人会发现,当你想要用这些备份还原功 ...
- 使用jna调用dll,jdk位数和dll位数的关系
最近在学习jna,发现dll文件能能否成功调用取决于jdk位数. 32位jdk只能使用32位的dll,64位jdk只能使用64位的dll,否则位数不对应的话报的错是 "Exception i ...
- TStringList TMemo Text与Add赋值的区别 Memo.Text赋值高度注意事项,不得不知的技巧。
Memo.Text赋值高度注意事项,不得不知的技巧. list := TStringList.Create; list.Text:= str: list.Count; list.Clear; l ...
- <COM原理和应用>第七章的ITextObject代码是什么?
第7章中有如下的描述:-----------------------------------为了在程序中使用"Text.Object"文本对象,我们利用ClassWizard引 ...
- iOS出现<object returned empty description>的解决方法
iOS出现<object returned empty description>的解决方法: 使用 [str length] <= 0 判断处理