发布网友 发布时间:2024-09-13 16:39
共1个回答
热心网友 时间:2024-09-23 03:07
渐变概念渐变(gradients)可以让我们在两个或多个颜色之间进行平稳的过渡。
曾经我们只有使用图像来实现颜色的过渡效果,但渐变的出现,可以让用户使用时减少下载的时间和宽带的使用。
渐变效果的元素在放大时看起来效果会更好,这是因为渐变是由浏览器自己生成的。
渐变分为线性渐变和径向渐变。
线性渐变(LinearGradients):向下/向上/向左/向右/对角方向
径向渐变(RadialGradients):由它们的中心定义
IE9及以下不兼容
线性渐变语法:background-image:linear-gradient(direction,color-stop1,color-stop2,...);
direction:可选,方向
color:颜色,至少要写两个,可以写多个
比如:
/*totop、tobottom、toleft、toright、tolefttop等等*//*xxxdegdeg表示度数*//*可以同时指定多个颜色,多个颜色默认情况下平均分配也可以手动指定渐变的分布情况*//*从上往下,红色渐变到**/linear-gradient(red,yellow);/*从右下往左上、从红色渐变到**/linear-gradient(tolefttop,red,yellow);/*渐变角度为45度,从蓝色渐变到红色*/linear-gradient(45deg,red,yellow);/*从下往上,从红色开始渐变、到高度40%时开始由蓝色渐变、最后以*结束*/linear-gradient(0deg,red,blue40%,yellow);不设置direction不写方向颜色默认是从上往下过渡<style>div{width:200px;height:100px;background-image:linear-gradient(red,yellow);}</style><body><h3>颜色渐变:从上往下</h3><div></div></body>多个颜色<style>div{width:200px;height:100px;background-image:linear-gradient(red,pink,blue);}</style><body><div></div></body>设置direction1.用to去指明要渐变的方向线性渐变-从左到右<style>div{width:200px;height:100px;background-image:linear-gradient(toright,red,yellow);}</style><body><h3>颜色渐变:从左往右</h3><div></div></body>线性渐变-对角<style>div{width:200px;height:100px;background-image:linear-gradient(torightbottom,red,yellow);}</style></head><body><h3>颜色渐变:从左往右下</h3><div></div></body>2.设置角度角度是指水平线和渐变线之间的角度,在0deg将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变。
有些旧浏览器显示的是:0deg将创建一个从左到右的渐变,90deg将创建一个从下到上的渐变。
我们可以使用换算公式:x=90-y,其中x为标准角度,y为非标准角度。
<style>div{float:left;margin:5px;width:200px;height:100px;/*0deg默认是从下往上*/background-image:linear-gradient(0deg,red,yellow);}.one{/*90deg从左往右*/background-image:linear-gradient(90deg,red,yellow);}.two{/*180deg从上往下*/background-image:linear-gradient(180deg,red,yellow);}.three{/*-90deg从右往左*/background-image:linear-gradient(-90deg,red,yellow);}.four{/*-90deg指定颜色分配从右往左*/background-image:linear-gradient(-90deg,red,blue40%,yellow);}</style><body><div></div><divclass="one"></div><divclass="two"></div><divclass="three"></div><divclass="four"></div></body>使用透明度使用透明度的操作和上面还是一样的,只是把颜色变成了透明效果。
<style>div{margin:5px;width:200px;height:100px;/*红色,透明度逐渐增大*/background-image:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1));}.one{background-image:linear-gradient(toright,transparent,rgba(255,0,0,1));}</style><body><h3>颜色渐变:从左往右</h3><div></div><divclass="one"></div></body>重复的线性渐变语法:background-image:repeating-linear-gradient(direction,color1,color2,...);
重复的线性渐变和不重复的线性渐变一样,只是需要手动指定颜色分配,这样才会出现重复样式。
<style>div{float:left;margin:5px;width:200px;height:100px;/*默认是上往下*/background-image:repeating-linear-gradient(red,yellow20%);}.one{/*多个颜色*/background-image:repeating-linear-gradient(red,blue20%,yellow40%);}.two{/*指定方向,从左往右*/background-image:repeating-linear-gradient(toright,red,yellow20%);}.three{/*指定颜色分配从左往右*/background-image:repeating-linear-gradient(90deg,red,blue30%,yellow40%);}</style><body><div></div><divclass="one"></div><divclass="two"></div><divclass="three"></div></body>原文:https://juejin.cn/post/7099048020490059812