发布网友
发布时间：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
Copyright © 2019-2022 51dongshi.com 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
