CSS3 Gradient 渐变

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

CSS3 Gradient 渐变还能这么玩

浏览器支持两种类型的渐变:线性渐变 (linear-gradient),径向渐变 (radial-gradient) 渐变在 CSS 中属于一种 Image 类型,可以结合 background-image 属性使用和图片不同的是,渐变不需要引入,而是由代码直接生成的,所以比图片更高效易用一.简单线性渐变基础语法:linear-gradient( angle, start-color, end-color ) 其中 start-color 是渐变的初始颜色,end-color 是结束的…

深入理解CSS3 gradient斜向线性渐变——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想得那么简单提问,使用CSS3 gradient渐变,在一个400*300的div层上实现一个(100px, 100px)到(200px, 200px)由红到黄的斜向线性渐变,该如何实现? //zxx: 这里的讨论CSS3渐变都是基于新式规范写法,且忽略私有前缀我们可能知道水平渐变的实现,类似这样…

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之渐变Gradient

渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变).下面就为大家详细介绍一下CSS3中渐变——Gradient. 一.Gradient语法 1.线性渐变的语法: 对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);} 2.径向渐变的语法: 对象选择器 {background:-浏览器…

CSS3的渐变-gradient

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). CSS3的线性渐变一.线性渐变在Mozilla下的应用语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下.left是从左到右,如果定义成left top…

【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

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

css3 Gradient背景

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

CSS3 线性渐变（linear-gradient）兼容IE8,IE9

一.线性渐变在 Mozilla 下的应用语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从左到右,如果定义成 left top,那就是从左上角到右下角.第二个和第三个参数分别是起点颜色和终点颜色.你还可以在它们之间插入更多的参数,表示多种颜色的渐变…

CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器).WebKit(熟悉的有Safari.Chrome等浏览器).Opera(Opera浏览器).Trident(讨厌的IE浏览器).本文照常忽略IE不管,我们主要看看在Mozilla.Webkit.Opera下的应用,当…

CSS 3 属性学习 —— 1. Gradient 渐变

CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变参数: <linear-gradient> = linear-gradient( [<position>,] [<angle>,] <color-stop>[,<color-stop>]+ ); 设置线性渐变,我们至少要一个position或者angle来表示我们渐变的防线,同时还要设置两个颜色节点表示起始和终…

CSS3 Gradient-CSS3渐变

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

CSS3背景渐变。。。

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

CSS3 Gradient渐变效果

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

超多的CSS3圆角渐变网页按钮

<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/css">body { background: #ededed; width: 900px; margin: 30px auto; color: #999;}p { margin: 0 0 2em;}h1 { margin: 0;}a { color: #339; text-decoration…

CSS3 线性渐变linear-gradient

CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等). WebKit(Safari.Chrome等).Opera(Opera浏览器).Trident(IE浏览器). 一.线性渐变在 Mozilla 下的应用语法: 1 -moz-linear-gradient( [<point> |…

CSS3 线性渐变（linear-gradient）

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

css3背景渐变以及图片混合渲染模式（一）

一.CSS3 渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Rad…

css3之渐变

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)- 由它们的中…

CSS3技巧：利用css3径向渐变做一张优惠券（转）

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券. CSS3 径向渐变和线性渐变是很相似的,首先来看其语法: -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> |…

-_-#【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线性渐变实现图片闪光划过效果(转)

原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html CSS3 经典教程系列:CSS3 线性渐变(linear-gradient) HTML <p class="overimg"> <a><img src="http://www.no…

CSS3 文字渐变动画

背景剪裁语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webkit-background-clip:text;(谷歌浏览器) 示例:从局部到全局渐变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t…

CSS3 & gradient & color & background

CSS3 & gradient & color & background css background https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients Gradient Background Linear Gradients (goes dow…

CSS3中渐变gradient详解

这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradient)和径向渐变(radial-gradient),下面分别是线性与径向渐变的效果(用Flash画的,习惯了 O(∩_∩)O哈哈~.☺) 首先说一下webkit的浏览器(谷歌的Chrome啊等等) webkit下对于Gradient定义了两种方法: -webkit-linear-gradient -w…

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

一.引子 Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变. 如果你正在运行的Firefox 3.6的最新测试版,你应该看看我们的互动演示,并查看相应的代码.使用单选按钮来切换不同的样式选项. 二.含CSS渐变的背景(backgrounds) 背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡.这反过来又减少了下载时间和带宽的使用,放大时也比较好看,可以让您创造出一个更灵活的布局. Firefox支持两种类型的CSS渐变:线性的(-moz-l…

【CSS3 Gradient 渐变】的更多相关文章