CSS渐变,终结篇

你常用CSS渐变吗?

如果回答是不,那么很可能是被它复杂的语法吓到了,且不说不同浏览器,即使是很赶时髦的Chrome,也经历了3个阶段,好在目前渐变规范进入了w3c草案,慢慢地终于“稳定”了下来。为避免混淆,本文只使用最新的语法。

题目叫终结篇,意思是看完这篇文章就不再纠结了。

什么是渐变

渐变本质是一种image,所以应该是background-image而不是background-color的值。渐变大体分两种,线性linear和径向radial,还有重复渐变是这两种渐变的特殊形式。

线性渐变linear-gradient

基本语法:

background-image: linear-gradient(red, yellow);

linear-gradient

红到黄的渐变,默认的方向是从上到下。

要改变方向,在括号的颜色前面使用to+方向:

background-image: linear-gradient(to right, red, yellow);

linear-gradient

不止4个方向,还可以to top right,即右上角,当然,可以直接使用角度deg的:

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

linear-gradient

以上的渐变各颜色所占的比例是均分的,想要自定义比例,直接在颜色后面跟上百分数即可。同时,想要定义多组颜色,直接定义即可。

其实这个百分早在Photoshop里面出现过的(早在?哈,因为我初中时候接触的Photoshop)

linear-gradient

综合起来,下面这个定义就包含了所有的线性渐变的语法:

background-image: linear-gradient(130deg, red 10%, yellow 30%, blue);

linear-gradient

记住最后一个就是了,记住了吗?没有?好,下一个。

径向渐变radial-gradient

这个也很简单,基本语法:

background-image: radial-gradient( yellow, #f06d06 );

radial-gradient

肿么是扁的,我要圆圆的,那么就第一个参数设置为circle即可

ps:第一个参数忽略则默认是ellipse(椭圆)

background-image: radial-gradient( circle, yellow, #f06d06 );

radial-gradient

好像还是不太对,怎么只能看到局部呢,如何看到整个的渐变?加上一个closest-side即可

background-image: radial-gradient( circle closest-side, yellow, #f06d06 );

radial-gradient

除了closest-side,可能的值还包括closest-corner, closest-side, farthest-corner, farthest-side。可以想成:我希望径向渐变从中心开始到___________,剩下的地方实色填充。

此外,还可以使用at定义渐变的中心点(默认是元素中心)

background-image: radial-gradient( circle at top right, yellow, #f06d06 );

radial-gradient

也可使用具体的数值at 10px 45px,或者百分数或者混合at 50% 45px

重复渐变repeating-xxx-gradient

多了一个单词repeating另外相应的位置单位变成了具体的数值如px,效果是怎样的,打开F12试一下吧

background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );

兼容性

好像还差了点什么?对,作为前端,怎么会少得了兼容性问题?如何保证渐变的正常显示?哈哈,如果是按照上面的标准语法来写,剩下的兼容性转换可以直接交给Autoprefixer,设置好需要照顾到的浏览器,剩下的事情交给工具去完成吧。

实际上渐变现在已经不是什么高级特性了,在移动端可以放心大胆地使用。当然每次都不得不单独说的,IE,渐变只在IE10+支持,9及以下需要filter来模拟,不过如果是移动端页面开发,直接忽略它。

参考来源:CSS Gradients--css-tricks

标签: css3, CSS渐变, gradient, linear-gradient, ratial-gradient

添加新评论