【css3 Gradient背景】的更多相关文章

css3 Gradient背景

css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始颜色],[设置多种过度颜色],[设置结束颜色]) 参数: 第一个参数:指定渐变方向,可以用“角度”的关键字或“英文”来表示: 第一个参数默认:180deg,等同于“to bottom”. 后面的颜色至少有2个,即开始颜色和结束颜色. 2.使用 a.举例: <style type="text/c…

CSS3 Gradient 渐变

转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿.从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3: Gradient─CSS3渐变.…

CSS3 Gradient

CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研CSS3在web中的应用,争取跟上技术的前沿.今天我们首先看一下:CSS3: Gradient─CSS3渐变. CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用CSS3…

CSS3 Gradient渐变效果

最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器).WebKit(熟悉的有Safari.Chrome等浏览器).Opera(p…

【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）

CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等). WebKit(Safari.Chrome等).Opera(Opera浏览器).Trident(讨厌的IE浏览器). 本文照常忽略IE不管,我们主要看看在 Mozilla.Webk…

CSS3 Gradient线性渐变

废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script><style type="text…

CSS3之背景剪裁Background-clip

CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这五个属性值为大家介绍CSS3之背景剪裁Background-clip. 一.Background-clip的语法 1.Background-clip的语法 background-clip: border-box || padding-box || context-box || no-clip ||…

-_-#【CSS3】CSS3 gradient transition with background-position

CSS3 gradient transition with background-position <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> #DemoGradient { background: -webkit-linear-gradie…

基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form clas…

CSS3透明背景+渐变样式

CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果: 核心代码如下: .map-interview { background-image:-webkit-linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 5%, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.6) 9…