linear-gradient css线性渐变(linear gradient隔行变色实现)
2017-01-14 19:20

   css gradient介绍

  css gradient能够渲染两个颜色之间的平滑渐变,分为两种,linear-gradient线性渐变,radial-gradient径向渐变。本文介绍linear-gradent线性渐变的语法和使用。

linear gradient 语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient 参数解释

direction方向

direction渐变方可可以是方向的枚举值,有两个参数,第一个是横向的,第二个是纵向的。

.linear-cont{
    height:300px;
    background:-webkit-linear-gradient(left top,#1E66B8,#B7AD05);
  }

一定要加前缀,-webkit,-moz,-o,-ms。不加前缀可能有一些写法就不支持。

效果如下:

leftgradient.png

使用方向枚举值的两个参数都是可选的,你可以填一个,也或者两个都不填,不填的时候默认是"to bottom",

枚举值前面还可以加一个“to”,如下:

.linear-cont{
    height:300px;
    background:-webkit-linear-gradient(to right bottom,#1E66B8,#B7AD05);
  }

在方向前面加“to”是规范,加上to 就像表示渐变向什么方向去,不加“to”就相当于from,从什么方向开始渐变。

上面的to right bottom和 left top的渐变方向是一直的,而默认的“to bottom” 也就相当于 “top”,从上往下的竖向渐变。

一个有4个方向值:left ,right,top,bottom.


direction的渐变的方向,可以是一个角度,支持deg,rad等单位

.linear-cont{
    height:300px;
    background:linear-gradient(30deg,#1E66B8,#B7AD05);
  }

效果如下:

deggradient.png

deg角度的方向时,0deg是从下往上的渐变,跟枚举值的方向是相反的,所以旋转30deg是从偏左下角可是渐变的。角度旋转都是沿着顺时针方向的。


color-stop参数

color-stop参数的语法如下

color-stop=color [length/percent]

一个颜色值,后面可以跟一个此颜色的结束位置,如果没有辞职那么一个color-stop就会从50%位置分割。

.linear-cont{
    height:300px;
    background: linear-gradient(#1E66B8 120px,#19CF8D80%,#CF19C9);
}

效果如下:

colorstop.png

linear-gradient实现隔行变色的功能

通过上面color-stop的length特性我们可以实现隔行变色的功能。配合background-size属性来实现。

.linear-cont{
    height:300px;
    background: linear-gradient(#1E66B8,#1E66B8 50%,#CF19C9 50%,#CF19C9) repeat-y;
    background-size:100% 50px;
}


效果如下:

隔行变色.png

效果妥妥的,perfect。

注意这里的background-size,设置了背景色的高度是50px,所以渐变色的一栏高度是50/2=25px。

notes:使用background-size设置背景色大小的时候,color-stop里的宽度最好不要用固定数值(比如px,em等),最好用百分比,相对于background-size的大小。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3738)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1