css3之渐变色彩

色彩渐变 : gradient(线性渐变 和 径向渐变)

支持情况: IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+

linear-gradient(to right,red,green)

linear:渐变类型,radial为径向渐变

to right :渐变方向 ,可以写角度(相当于90deg)

red,green:从红色渐变到绿色,可以有多个值

p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: white;
font-size:24px;
background:linear-gradient(80deg,pink,indigo);
}

再让我们看下径向的渐变

p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: white;
font-size:24px;
background:radial-gradient(pink,indigo);
}

时间: 2024-11-06 18:43:44

css3之渐变色彩的相关文章

CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

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

渐变色彩 省略标记 嵌入字体 文本阴影

1.渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial).由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料.W3C 语法已经得到了 IE10+.Firefox19.0+.Chrome26.0+ 和 Opera12.1+等浏览器的支持. 这一小节我们来说一下线性渐变: 参数: 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示: (单击图片可放大) 第一个参数省略时,默认为“

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

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

CSS3背景渐变。。。

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

渐变色彩

渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial).由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料.W3C 语法已经得到了 IE10+.Firefox19.0+.Chrome26.0+ 和 Opera12.1+等浏览器的支持. 这一小节我们来说一下线性渐变: 参数: 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示: (单击图片可放大) 第一个参数省略时,默认为“18

CSS3 线性渐变(linear-gradient)特效详解

在以前,渐变效果和阴影.圆角效果一样都是做成图片,直接编写  CSS 代码就可以实现.现在的CSS3线性渐变(linear-gradient)技术也可以实现这样的效果喽! CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等).WebKi

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-渐变背景色

线性渐变背景色: <style> .linear { width:130px; height:130px; border:2px solid black; padding: 10px; background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); -webkit-background-origin: padding; -webkit-background-clip: content;