CSS3的线性渐变(linear-gradient)

以webkit内核浏览器为例,

语法:

div{
    width:200px;
    height:200px; 
    background:-webkit-linear-gradient(left,#F39,#09C);
}

如图:

参数:

-webkit-linear-gradient 是 webkit 引擎对渐变的实现参数。第一个参数控制渐变方向,比如 left (由左向右)right(由右向左)。第二个和第三个参数,分别是颜色起止颜色。

起止颜色是沿着渐变线,将会在指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置,0%代表起点和100%是终点,但区域外的值可以被用来达到预期的效果。 这也是通过CSS3 Gradient制作渐变的一个关键所在,其直接影响了你的设计效果,像我们这里的示例都不是完美的效果,只是为了能给大家展示一个渐变的效果,大家就这样先用着吧。我们接着看一下不同的起址色的示例:

div{
    width:200px;
    height:200px; 
    background:-webkit-linear-gradient(left,#F39 90%,#09C);
}

如图下

更详情的用法欢迎大家一起来讨论,

时间: 2024-10-21 13:53:29

CSS3的线性渐变(linear-gradient)的相关文章

css3的线性渐变

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

css3 Gradients 线性渐变

代码块 html页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>css3 Gradients</title> </head> <body> <div

CSS3背景线性渐变

5.背景线性渐变:background-gradient (1)linear:线性渐变, 谷歌浏览器:(webkit) background:-webkit-gradient(linear ,0 0,0 80% , from(#fff),  to(#000));(水平渐变) background:-webkit-gradient(linear ,0 0, 80% 0 , from(#fff),  to(#000));(垂直渐变) background:-webkit-gradient(linea

【CSS3】 线性渐变

参考地址:http://www.w3cplus.com/css3/new-css3-linear-gradient.html background-image: linear-gradient(to bottom, //渐变方向#d9edf7 //开始颜色0px, //?????#b9def0 //结束颜色100%); //透明 百分比 background-image: -webkit-linear-gradien(to bottom, #d9edf7 0px, #b9def0 100%);

CSS3基本属性之渐变Gradient

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

再说CSS3渐变——线性渐变

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

CSS3渐变——线性渐变

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

CSS3魔法堂:背景渐变(Gradient)

一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 代码: <style type="text/css"> .rainbow-linear-gradient{ width: 460px; height: 160px; background-image: -webkit-linear-gradient(left,#E50743 0

【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