渐变：

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
分为线性渐变(linear-gradient)、径向渐变(radial-gradient)

线性渐变(linear-gradient)：

为了创建一个线性渐变，必须至少定义两种颜色。这个颜色就是你想呈现的平稳过渡的颜色，同时也可以设置一个起点和一个方向（或一个角度）。
语法：background:linear-gradient(direction,color1,color2……)
1、线性渐变—从上到下（默认情况下）
下面的实例演示了从顶部开始的线性渐变。起点是热粉色，慢慢过渡到深天蓝：
注：适配所有浏览器，需要加各大浏览器的前缀。下同，不会再赘述。
div{
background：linear-gradient(hotpink,deepskyblue);/标准的语法/
background：-webkit-linear-gradient(hotpink,deepskyblue);/谷歌，Safari/
background：-o-linear-gradient(hotpink,deepskyblue);/Opera/
background：-moz-linear-gradient(hotpink,deepskyblue);/Firefox/background：-ms-linear-gradient(hotpink,deepskyblue);/IE/
}
效果如下图：

2、线性渐变—从右到左
下面的实例演示了从右边开始的线性渐变。起点是红色，慢慢过渡到粉色，再到天蓝色：
div{
background:linear-gradient(to left,red,pink,shyblue);/*–
webkit前缀的浏览器要注意一下，假如默认情况下是to left，
如果想要达到相同的效果，这里需要写right，否则渐变方向相反
下面的其他效果也是一样，请多加注意！！!
–*/
background:-webkit-linear-gradient(right,red,pink,shyblue);
background:-o-linear-gradient(left,red,pink,shyblue);
background:-moz-linear-gradient(left,red,pink,shyblue);background:-ms-linear-gradient(left,red,pink,shyblue);
}
另外需要注意的是：默认写法方向需要加to，而加浏览器前缀后，不需要加to
效果图如下：

3、线性渐变—对角/角度
3.1对角，你可以通过指定水平和垂直的起始位置来制作一个对角渐变。下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到粉色，再到天蓝色：div{
background:linear-gradient(to right bottom,red,pink,skyblue);background:-webkit-linear-gradient(left top,red,pink,skyblue);/这里右下对应左上/background:-o-linear-gradient(right bottom,red,pink,skyblue);background:-moz-linear-gradient(right bottom,red,pink,skyblue);background:-ms-linear-gradient(right bottom,red,pink,skyblue);

}
效果图如下：

3.2角度，使用角度可以达到同样的效果：
角度：正值逆时针，赋值顺时针
div{
background:linear-gradient(45deg,red,pink,skyblue);
background:-webkit-linear-gradient(45deg,red,pink,skyblue);/角度不用相对/
background:-o-linear-gradient(45deg,red,pink,skyblue);
background:-moz-linear-gradient(45deg,red,pink,skyblue);
background:-ms-linear-gradient(45deg,red,pink,skyblue);
}
给了一个45deg，就和上面那个从左上到右下的效果一样，当然了，角度可以随意调整，这里只是为了说明这两个可以达到同样的效果。
效果图如下：

4、线性渐变—平铺/重复
repeating-linear-gradient() 函数用于重复线性渐变：
取值单位可以是px也可以使百分比
注：平铺/重复的角度webkit和默认写法也有一些区别:默认写法的0deg是从上到下的，但是webkit的需要旋转90deg才是
下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到粉色，再到天蓝色：
div{
background:repeating-linear-gradient(0deg,pink20px,skyblue40px);
background:-webkit-repeating-linear-gradient(90deg,pink20px,skyblue40px);
background:-o-repeating-linear-gradient(0deg,pink20px,skyblue40px);
background:-moz-repeating-linear-gradient(0deg,pink20px,skyblue40px);
background:-ms-repeating-linear-gradient(0deg,pink 20px,skyblue 40px);
}
注：这个平铺个数的算法是（div的总高度/40-20）
我这里div的高度是200px，所以平铺的个数为200/20=10个
效果图如下：

5、线性渐变—控制渐变的区域范围
下面的实例演示了从80px开始到120px的线性渐变，渐变区域是120-80=40px，这里用了颜色明显的红色和蓝色，以突出渐变的那40px：
div{
background:linear-gradient(red 80px,blue120px);
background:-webkit-linear-gradient(red 80px,blue120px);
background:-o-linear-gradient(red80px,blue120px);
background:-moz-linear-gradient(red80px,blue120px);
background:-ms-linear-gradient(red 80px,blue 120px);
}
效果图如下：

6、线性渐变—透明度的使用
CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：
div{
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
background: -ms-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
}
效果图如下：

范例：
用线性渐变写绿草的范例：.item11{
width:900px;height:50px;background-image:linear-gradient(45deg,blue40px,transparent40px);/跟背景图设置似的/background-size:30px50px;
}
效果图如下：

径向渐变(radial-gradient)

径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。
同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
不能指定角度，可以给方向
1、径向渐变—默认、渐变中心、渐变大小
下面的实例演示了从中心开始的径向渐变。起点是黑色，终点是红色：
div{
background: radial-gradient(black,red);
background: -webkit-radial-gradient(black,red);
background: -o-radial-gradient(black,red);
background: -moz-radial-gradient(black,red);
background: -ms-radial-gradient(black,red);
}
添加了px区域的
div{
background: radial-gradient(black 100px,red 100px);
background: -webkit-radial-gradient(black 100px,red 100px);
background: -o-radial-gradient(black 100px,red 100px);
background: -moz-radial-gradient(black 100px,red 100px);
background: -ms-radial-gradient(black 100px,red 100px);
}
改变了渐变方向的：
div{
background: radial-gradient(right,black 100px,red 100px);
background: -webkit-radial-gradient(right,black 100px,red 100px);
background: -webkit-radial-gradient(right,black 100px,red 100px);
background: -webkit-radial-gradient(right,black 100px,red 100px);
background: -webkit-radial-gradient(right,black 100px,red 100px);
}
效果图如下：

添加了px的：

改变了渐变方向的：

2、径向渐变—平铺
原理与线性渐变平铺一样，不再赘述。
下面的实例演示了从中心开始的径向渐变。起点是黑色，重点是红色，然后平铺渐变区域：
div{
background: repeating-radial-gradient(black 50px,red 70px);
background: -webkit-repeating-radial-gradient(black 50px,red 70px);
background: -webkit-repeating-radial-gradient(black 50px,red 70px);
background: -webkit-repeating-radial-gradient(black 50px,red 70px);
background: -webkit-repeating-radial-gradient(black 50px,red 70px);
}
效果图如下：有点像玫瑰花哦，哈哈哈~

3.径向渐变—渐变形状/重复
如果是长方形就拉伸为椭圆，想让显示为圆形的话，可以加一个circle在red前面(circle圆形，ellipse默认，椭圆)，这时候方向写在最前面。
上面的例子是在正方形（200*200）里的模样，默认为圆形，在长方形（400*200）里就是椭圆形
div{
width:400px;
background: repeating-radial-gradient(black 50px,red 70px);
background: -webkit-repeating-radial-gradient(black 50px,red 70px);
background: -webkit-repeating-radial-gradient(black 50px,red 70px);
background: -webkit-repeating-radial-gradient(black50px,red70px);
background: -webkit-repeating-radial-gradient(black50px,red70px);
}
效果图如下：

加上圆形circle就可以变成圆形：
div{
width:400px;
background: repeating-radial-gradient(circle,black 50px,red 70px);
background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px);
background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px);
background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px);
background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px);
}
效果图如下：

径向渐变可以和线性渐变混合使用：
div{
width: 400px;
background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px),-webkit-repeating-linear-gradient(green 60px,purple 70px);
background-blend-mode:exclusion;
}
/这里只写webkit前缀的，其他浏览器也可以同样使用/
效果图如下：

渐变：线性渐变、径向渐变相关推荐

CSS3 渐变: 线性渐变 linear-gradient 和径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
SVG 教程（六）SVG 阴影，SVG 渐变 - 线性，SVG 渐变- 放射性
SVG 阴影注意: Internet Explorer和Safari不支持SVG滤镜! <defs> 和 <filter> 所有互联网的SVG滤镜定义在<defs> ...
css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)
线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用线性渐变线性渐变是向下.向上.向左.向右.对角方向的颜色渐变. 其语法格式为: background-image: linear- ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
CSS3渐变属性：线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
css好看的html径向渐变,CSS3径向渐变
上次说到CSS3中的线性渐变,表面上看起来似乎有些复杂,但是逐条分解下来其实也没有那么难理解,总结下来无外乎就三点:颜色.方向和位置.那么今天所要讲到的径向渐变相对来说会更复杂一些,不过没有关系,我们 ...

渐变：线性渐变、径向渐变

渐变：

线性渐变(linear-gradient)：

径向渐变(radial-gradient)

渐变：线性渐变、径向渐变相关推荐

最新文章

热门文章