CSS3径向渐变linear-gradient

语法:

选择器{
    background:linear-gradien(线性渐变的方向,起点颜色,终点颜色);
}

第一个参数:[可选参数,默认从上到下] 线性渐变的方向:top,bottom,left,right,top left;

第二个和第三个参数:起点颜色和终点颜色,其实中间可以插入更多的颜色,以实现多色渐变效果;支持直接写颜色,或16进制颜色

兼容性问题:

支持chrome和火狐,其他浏览器尚未测试,部分支持IE10,

为了支持chrome和火狐,要分别写上-webkit-,-moz-

比如:

div{
    background:-webkit-linear-gradient(top,red,blue);/*谷歌*/
    background:-moz-linear-gradient(top,red,blue);  /*火狐*/
    background:linear-gradient(top,red,blue);  /*ie10*/

}

之所以说部分支持IE10,是因为我测试时,第一个参数,写了多种之后,发现IE10只支持少数的几种方向。

ie6~9的背景色渐变:

其实是用了filter滤镜来做:

.div{
            filter: progid:DXImageTransform.Microsoft.gradient(
                GradientType=0,
                startColorstr=pink,
                endColorstr=black
            );
            /*IE7*8*9有效*/

其中:GradientType=1代表纵向,0代表横向

时间: 2024-10-12 12:46:38

CSS3径向渐变linear-gradient的相关文章

CSS3 径向渐变(radial-gradient)

上篇文章介绍了 CSS3 线性渐变(linear-gradient),这篇文章向大家介绍 radial-gradient(径向渐变)以及重复渐变(线性重复.径向重复).在以前,渐变效果和阴影.圆角效果一样都是做成图片,现在 CSS3 可以直接编写  CSS 代码来实现. CSS3 径向渐变和线性渐变是很相似的,我们首先来看其语法: .代码   -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || &l

初探CSS3 - 径向渐变

CSS3径向渐变是圆形或者椭圆形的渐变方式,颜色不再朝着一条直线的方向渐变,而是从一个起点沿着所有方向的渐变. 以orange向red渐变为例,最简单的径向渐变如下所示: <!DOCTYPE html> <html> <head> <title>radial</title> <meta charset="utf-8" /> <style type="text/css"> *{padd

css3 径向渐变

/* 径向渐变 */div.radial { width: 600px; height: 400px; margin: 30px auto; border: 1px #f00 solid; background-image: -webkit-gradient(radial,50% 50%,0, 50% 50%,100,from(green), to(purple),color-stop(50%,red),color-stop(80%,yellow));} <!-- 径向渐变 --><di

css3径向渐变详解-遁地龙卷风

(-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及…,这篇是为后续做准备. (0)快速使用 background-image:-webkit-linear-gradient(red,blue); 或者 background-image: -webkit-gradient(linear,center top,center bottom,from(#ace),to(#f96)); (1)环境准备 #lol { width:30

CSS3径向渐变----大鱼吃小鱼之孤单的大鱼

最近迷恋上了钓鱼,可是总钓不到大鱼,所以就画条大鱼来安慰一下我这柔弱的心灵. 先上图: 上面这个就是今晚上我要跟大家分享的小DEMO,我给他起名字就“大鱼吃小鱼之孤单的大鱼”. 转入正题,这条大鱼分为三部分:头,尾巴,眼睛.首先看一下这条鱼的框架,如下面所示,class已经说得很直接了 <div class="fish"> <div class="fisg-head"></div> <div class="fisg

CSS3渐变——径向渐变

上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用. CSS3径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 一.径向渐变的语法 CSS3的径向渐变已得到众多浏览器引擎的支持,只不过其语法的版本根据不同的引擎浏览器,其语法也不一样

Css3渐变(Gradients)-径向渐变

CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你也可以指定渐变中心.形状(圆形或椭圆形).大小. 默认情况下,渐变的中心是center(表示在中心),渐变的形状是ellipse(表示椭圆形),变天的大小是farthest-corner(表示到最远的角落) 语法: background: radial-gradient(center, shape

CSS3之径向渐变

径向渐变(radial gradients):从起点到终点颜色从内而外沿进行圆形渐变. 语法 background:radial-gradient(center,shape size,start-color,……,last-color); 径向渐变-设置形状 语法: background:radial-gradient(shape,start-color,……,last-color); 说明: shape值可以取两个 circle——圆形 ellipse——椭圆(默认) 径向渐变-尺寸大小关键字

CSS3背景渐变。。。

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