线性渐变 linear-gradient

渐变线

在渐变容器中,穿过容器中心点和颜色停止点连接在一起的线称为渐变线。在一个笛卡尔坐标系中,y轴正方向为0deg(to top),x轴正方向为90deg(to right),y轴负方向为180deg(to bottom),x轴负方向为270deg(to left)

background-image: linear-gradient(0deg, red, white);

渐变角度

角度简写对应的角度值

to deg turn
to top 0deg 1turn
to right 90deg .25turn
to bottom 180deg .5turn
to left 270deg .75turn
to top right 45deg .125turn
to bottom right 135deg .375turn
to bottom left 225deg .625turn
to top left 315deg .875turn

渐变线长度

通常,浏览器会计算渐变线的长度,以覆盖整个填充容器,计算公式为:

abs(W * sin(A)) + abs(H * cos(A))

其中: W是渐变容器的宽度,H是渐变容器的高度,A是渐变角度

渐变色节点(Color stops)

渐变色的每一个颜色可以这样定义:

<color> [<percentage> | <length>]

默认情况下是均分

在样式中可以指定各项颜色的线长:

background-image: linear-gradient(.125turn, red 30%, pink 70%, white);

其中,red从起始位置到整个渐变线的30%位置,pink从起始位置到整个渐变线的70%位置,white未指定则从0%到100%位置。

使用此特性,可以做出各种精美的纹理:

注意,如果后面的颜色占比小于前面颜色占比,则会出现明显的分界线:

渐变透明度(Transparency)

透明度还支持透明渐变,这对于制作一些特殊的效果是相当有用的。

background-image: linear-gradient(.125turn, rgba(255,0,0,.5) 30%, rgba(255,255,0,.5) 70%, white), url(./bg.jpg);

可累加的线性渐变背景图

线性渐变支持累加效果,不过注意为前面的颜色设置透明度,否则是看不到效果的。

background: linear-gradient(.125turn, rgba(255,0,0,.6) 30%, rgba(255,255,0,.4) 60%),
      linear-gradient(green 40%, blue 80%, white);

可重复的线性渐变

使用可重复的线性渐变可轻松做出各种好看的纹理、进度条等。

background: repeating-linear-gradient(135deg, #000 0, #000 .25em, #0092b7 0, #0092b7 .5em);

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress