linear-gradient

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ohohohmygodness/article/details/68993298

linear-gradient

语法: -浏览器前缀-linear-gradient(方向(可选),颜色结点1,颜色结点2,颜色结点3,…)
* 浏览器前缀 -webkit -o -moz 不加浏览器前缀则
需在方向前加to 如to top,注意to top等同与bottom表示从下往上,当然,可以使用角度
* 方向可以为角度,或是top,right,bottom,left 中的一个,默认从上往下
top即方向由上往下按顺序依次画出颜色结点的颜色,left由左往右方向,right和bottom同理
若方向为角度,0deg等同于left,逆时针,90deg=bottom,180deg=right,270deg=top,并且角度可为负值(在不加浏览器前缀时0deg是从上往下,默认从上往下)
使用角度的优点在于灵活,角度可任意
* 颜色结点可设置支持俗名,#,rgba等等,并且可额外附加百分比(注意颜色与百分比之间要加一个空格),表示该颜色所在的位置,中间部分为渐变色
比如linear-gradient(red 20%,blue 80%);
则从上往下前20%区域为红色,20%-80%区域为红色到蓝色的渐变色,80%-100%区域为蓝色
当然linear-gradient(red 20%,green 70%,blue 80%);表示0-20%区域为红色,20%-70%区域为红色到绿色的渐变色,70%-80%区域为绿色到蓝色的渐变色,80%-100%区域为蓝色
linear-gradient(red 20%,green,blue 80%);如果中间的green不标注百分比,则默认百分比为(20%+80%)/2=50%,表示0-20%区域为红色,20%-50%区域为红色到绿色的渐变色,50%-80%区域为绿色到蓝色的渐变色,80%-100%区域为蓝色
小应用:
产生条纹状背景
非渐变:
background: -webkit-linear-gradient(top,#fb3 50%,#58a 50%);
background-size: 100% 30%;
渐变:
background: -webkit-linear-gradient(top,white 0%,#fb3 30%,#58a 60%,white 100%);
background-size: 100% 30%;

猜你喜欢

转载自blog.csdn.net/ohohohmygodness/article/details/68993298
今日推荐