CSS3：linear-gradient，线性渐变的使用方法

【CSS3：linear-gradient，线性渐变的使用方法】的更多相关文章

[转]ebkit内核浏览器的Linear Gradients (线性渐变)

转自:http://www.css88.com/archives/tag/webkit-gradient webkit内核的safari. Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari. Chrome的Linear Gradients (线性渐变) 基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop…

深入理解css3中的线性渐变

css3中的线性渐变线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, <color-stop> [, <color-stop>]+ ); 意为:(角度deg或者方位词,一个或多个渐变颜色关键结点(多个的话用","隔开)); 此种写法跟正则表达式类似: [ ]:代表一个字符位,一般跟 “|” 连用,表示从[ ]中选择一个: |:表示“或”…

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中颜色线性渐变实战

css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .test{ background:linear-gradient(red, blue); } 上述代码的效果如图所示. 最简单的线性渐变效果如果要在一些旧版本的浏览器(除IE)下可以正常显示如图5.9的效果,则需要添加兼容代码: CSS Code复制内容到剪贴板 .test { background:…

CSS3：linear-gradient，线性渐变的使用方法

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 本文只讲述表准的语法,要想兼容更多浏览器可以到网上搜索出很多解决方案,逻辑基本一致. 1.语法 background: linear-gradient(direction, color-stop1, color-stop2…

gradient 线性渐变浏览器兼容

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=white, endColorstr=silver);/*IE<8-9>*/ background-image:-webkit-linear-gradient(top,white,silver); background-image:-moz-linear-gradient(top,white,silver); background-i…

【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斜向线性渐变——张鑫旭

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 线性渐变（linear-gradient）兼容IE8,IE9

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

CSS3线性渐变linear-gradient

转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下.left是从左到右,如果定义成left top,那就是从左上角到右下角.第二个…

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背景渐变属性 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下的应用,当…

CSS3之线性渐变（linear gradients）

线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变. 语法: background:linear-gradient(direction,color-stop1,color-stop2,--); 1.线性渐变从上到下(默认) 语法 background:linear-gradient(color-stop1,color-stop2--); 实例 div { width: 800px; height: 500px; margin: 0 auto; back…

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐…

CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐…

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-text-effect.html .这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击.文字选择等事件. 改进的方法可以使用 CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片.下面是实现效果示例,相比以…

CSS3渐变(Gradients)-线性渐变

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

CSS3 linear-gradient线性渐变实现虚线等简单实用图形

一.作为图片存在的CSS3 gradient渐变我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果.甚至,理论上,任意彩色jpg图片都是可以使用CSS3渐变背景实现的. 这种特性和box-shadow类似,参见“CSS3 box-shadow盒阴影图形生成技术”,text-shadow也有无限累加性,通常我们可以实现任意粗…

css3 线性渐变和径向渐变

线性渐变:ie6以下不兼容径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>Background Color</title> <style ty…

CSS3的线性渐变（linear-gradient）

CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div{ width:200px; height:200px; background:-webkit-linear-gradient(left,#F39,#09C); } 如图: 参数: -webkit-linear-gradient 是 webkit 引擎对渐变的实现参数.第一个参数控制渐变方向,比如…

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径垂直半径 border-radius:水平半径/垂直半径 border-radius:60px 30px 120px 160px/160px 120px 30px 60px ; 单位:百分比和像素.最好使用% 练习盒子阴影 box-shadow 可设置多重边框阴影,增强立体感 box-shadow: 5px 5px 27px red,-5px -5px 27px gr…

IT兄弟连 HTML5教程 CSS3属性特效渐变2 线性渐变实例

3 线性渐变实例一.颜色从顶部向底部渐变制作从顶部到底部直线渐变有三种方法,第一种是起点参数不设置,因为起点参数的默认值为“top”:第二种方法起点参数设置为“top”:第三种起点参数使用“-90deg”关键词.为top_bottom设置从顶部向底部的渐变,三种方法的CSS代码如下: 第一种方法: 第二种方法: 第三种方法: 上述三种css设置运行的效果相同,top_bottom的背景变为从白色到黑色的自上而下形成线性渐变.在浏览器中查看效果如图1所示: 图1 顶部到底部的线性渐变同样,…

CSS3 新特性（box-sizing盒模型，背景线性渐变，filter滤镜，calc函数，transition过渡）

1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可分为两种情况: 1. box-sizing:content-box 盒子大小为 width + padding + border(默认) 2. box-sizing:border-box 盒子大小为 width 如果盒子模型我们改为了 box-sizing:border-box,…

CSS3：radial-gradient，径向渐变的使用方法

语法径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变.其语法如下: background: radial-gradient(center, shape, size, start-color, ..., last-color); center:渐变起点的位置,可以为百分比,默认是图形的正中心. shape:渐变的形状,ellipse表示椭圆形,circle表示圆形.默认为ellipse,如果元素形状为正方形的元素,则ellips…

使用CSS3线性渐变实现图片闪光划过效果

<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a> <i class="light"></i> </p> .overimg{ position: relative; display: block; /* ov…

css3的背景颜色渐变@线性渐变

背景颜色渐变之线性渐变语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); opera浏览器 background: -o-linear-gradient(position/deg,startColor,endColor); safari和chrome浏览器 background: -webkit-linear-gradient(position/deg,startCo…

【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渐变之线性渐变

css3定义了两种类型的渐变,即线性渐变和径向渐变.这里我要说的是线性渐变. 为了创建一个线性渐变,你必须至少定义两种颜色结点.颜色结点即你想要呈现平稳过渡的颜色.同时,你也可以设置一个起点和一个方向(或一个角度). 语法:background: linear-gradient(direction, color-stop1, color-stop2, ...); 注意:线性渐变默认是从上到下. 从上到下的渐变: #grad { background: -webkit-linear-gradie…

CSS3———linear-gradient() 线性渐变

线性渐变linear-gradient() 遇到了这样的css样式 body { height: 100%; background-color: #ffffff; background-image: url(images/overlay.png), linear-gradient(60deg, rgba(30, 159, 255, 0.17) 5%, rgba(255, 108, 96, 0.27)), url(images/bg.jpg); background-repeat: repeat,…