CSS3 Gradient 渐变还能这么玩

浏览器支持两种类型的渐变：线性渐变 (linear-gradient)，径向渐变 (radial-gradient)

渐变在 CSS 中属于一种 Image 类型，能够结合 background-image 属性使用

和图片不一样的是，渐变不须要引入，而是由代码直接生成的，因此比图片更高效易用

 

1、简单线性渐变

基础语法：linear-gradient( angle, start-color, end-color )

其中 start-color 是渐变的初始颜色，end-color 是结束的颜色，这些颜色统称为色标

angle 是渐变的角度，能够是具体的角度（45deg），也能够是 to + 方向（to bottom right）

如：

background: linear-gradient(70deg, red, yellow);

渐变的色标也能够是多个：

background: linear-gradient(90deg, red, yellow, green, blue, black);

从上图能够看到，这些颜色会均匀的分布开

若是须要自定义间距，能够在色标后面接具体的位置

background: linear-gradient(90deg, red 40px, yellow 15%, green 95%, blue );

虽然位置能够用具体的长度(px)，但为了自适应，最好是使用百分比

 

2、多图层的线性渐变

渐变做为一种 Image 类型，在 background-image 中使用的时候，是能够叠加的

如：

background-image: linear-gradient(90deg,rgba(255,0,0,.5), rgba(255,255,0,0.5)), linear-gradient(180deg,rgba(0,0,255,.5), rgba(0,255,0,0.5));

固然一般不须要叠加两个线性渐变

但若是是渐变结合底图的话...

background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(/assets/image.jpg);

就能实现这种图片的渐隐效果了 

 

3、径向渐变

径向渐变和线性渐变的语法相似，添加两个色标就能够获得一个渐变

基础语法：radial-gradient( start-color, end-color )

如：

background-image: radial-gradient(red 5%, yellow 50%, green 90%);

径向渐变不须要定义方向，但能够定义的参数还有不少，好比形状、圆心位置、大小

好比上面径向渐变的容器是一个正方形，若是改为长方形，但采用一样的渐变：

能够看到渐变的形状变成了一个轴对齐的椭圆，若是但愿依旧保持正圆，能够设定其形状

形状(shape)有两个可选参数：ellipse - 椭圆 (默认值)、circle - 正圆

background-image: radial-gradient(circle, red 5%, yellow 50%, green 90%);

还能够使用 形状(shape) + at + 位置(position) 的语句来描述圆心的位置

background-image: radial-gradient(circle at right bottom, red, yellow, green );

上面代码中的 right bottom 就是设置的圆心位置，也能够设置为具体的数值：circle at 0px 50px

 

4、径向渐变的半径

咱们能够用下面四个关键字来描述渐变的半径：

closest-side	从圆心到最近的边之间的距离做为半径
closest-corner	从圆心到最近的角之间的距离做为半径
farthest-side	从圆心到最远的边之间的距离做为半径
farthest-corner	从圆心到最远的角之间的距离做为半径

 

 

 

 

除了这四个关键字以外，也能够使用具体的数值（百分数除外）做为半径的长度，好比 30px, 40vw

background-image: radial-gradient(30px 70px at center,red, yellow, green );

到这里已经介绍了径向渐变的三种参数：形状(shape)、圆心位置(position)、半径长度(length)

在使用的时候须要注意：圆心位置须要用 at 衔接，而形状和半径不用

1. 形状 + 圆心位置： radial-gradient( circle at center,red, yellow ) 

2. 形状 + 半径长度： radial-gradient( circle closest-side,red, yellow ) 

3. 半径长度 + 圆心位置： radial-gradient( closest-side at center, red, yellow ) 

4. 形状 + 半径长度 + 圆心位置： radial-gradient( ellipse farthest-side at right bottom ,red, yellow ) 

 

5、重复的渐变

若是须要实现一个重复的渐变，能够使用 repeating-linear-gradient 和 repeating-radial-gradient

先经过两张图来看看 repeating-linear-gradient 和 linear-gradient 的区别：

background-image: linear-gradient(90deg, red, yellow 20px, black 40px);

background-image: repeating-linear-gradient(90deg, red, yellow 20px, black 40px);

所谓重复渐变就是将本来的渐变无限循环，但如何判断从什么位置开始循环呢？或者说如何判断一段渐变的长度呢？

其关键因素在于色标的位置，好比上面的 red, yellow 20px, black 40px  

就是在 0px 位置加了一个颜色为 red 的标记，20px 的位置加了一个 yellow 标记，40px 的位置加了一个 black 标记

因此这段渐变的长度为最后一个标记的位置，即 40px

基于这一点，就能够设计出不少好玩的渐变：

background-image: repeating-linear-gradient(45deg, white, white 5px, black 5px, black 10px);

background-image: repeating-radial-gradient(circle, white, white 5px, black 5px, black 10px);

background-image: repeating-linear-gradient(45deg, #b50642, #b50642 10px, transparent 10px, transparent 20px), repeating-linear-gradient(-45deg, #b50642, #b50642 10px, transparent 10px, transparent 20px), linear-gradient(#9bdaf3, #9bdaf3);

background-color: #000; background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);

// 上面这个渐变转自《使用CSS渐变》

 

6、用渐变作一个进度条 

一般项目中须要使用 CSS 变量的时候，都会经过 Sass 和 Less 来定义

不过 CSS 自己也能够经过 -- 来声明变量（和 Sass 的 $ 相似），而后经过 var() 来调用

body { --bg: red; background-color: var(--bg); }

在使用 -- 声明变量名时，须要注意区分变量名的大小写

并且 -- 只能用来声明属性值，不能做用属性名

 var() 函数还能够接受第二个参数，做为第一个参数的默认值

 

若是咱们将进度条的加载进度用一个 CSS 变量来表示，而后经过 js 实时修改这个变量，就能实现进度条的效果

话很少说，直接上干货：

// 这种方案是在掘金上看到的，惋惜写博客的时候已经找不到连接，若是有知道的小伙伴请给我留言

--color: #67e035; --position: 60%; height: 30px; background-color: #e4e4e4; border-radius: 15px; background-repeat: no-repeat; background-size: 100%, var(--position); background-image: 
radial-gradient(closest-side circle at var(--position), var(--color), var(--color) 100%, transparent), 
linear-gradient(var(--color), var(--color));

在项目中应用的时候，只须要实时修改 --position 的值，就能够实现进度条效果

 

 

参考文章：

《使用CSS渐变》