CSS3渐变色彩

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。首先来了解下线性渐变的语法:

第一个参数是指定渐变的方向,可以用角度的关键词或英文来表示。第一个参数省略时,默认为180deg,等同于to bottom:

第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值,如:

或者是:

接下来我们来看一下复杂点的径向渐变,语法:

  background:radial-gradient(position ,shape size,start-color,stop-color);

 position属性值(默认是center):

 shape和size属性值(默认shape是椭圆ellipse):

 

亲测closet-side无法让径向渐变显示出来。

 我们能够为颜色值添加百分比,来使得各个颜色节点不均匀分布:

 

原文地址:https://www.cnblogs.com/fengxiongZz/p/6535353.html