基于Gecko引擎的CSS3渐变效果达成
发布时间：2022-04-20 09:26:40 所属栏目：语言 来源：互联网
导读：在前端网页开发的时候，我们常会用到一些渐变效果，这样可能让网站页面更美观。如果是直接使用图片渐变效果，那么修改起来是非常不放方便的，而且也不能支持缩放这些，但是使用css渐变就能够解决这样的问题。这篇文章就主要介绍基于Gecko引擎浏览器的CSS渐变
|
在前端网页开发的时候，我们常会用到一些渐变效果，这样可能让网站页面更美观。如果是直接使用图片渐变效果，那么修改起来是非常不放方便的，而且也不能支持缩放这些，但是使用css渐变就能够解决这样的问题。这篇文章就主要介绍基于Gecko引擎浏览器的CSS渐变效果实现。 Gecko引擎的CSS渐变设计直线渐变基本语法 -moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*) 参数说明： <point>:定义渐变起始点，取值包含数值，百分比，也可以使用关键字，其中left，center 和 right 关键字定义 x 轴坐标，top，center 和 bottom 关键字定义 y 轴坐标。当指定一个值时，另一个值默认为 center 。 <angle>:定义直线渐变的角度。单位包括deg，grad（梯度，90度 = 100grad），rad （弧度，一圈等于2*PI rad）。 <stop>：定义步长，用法与Webkit引擎的color-stop()函数相似，但是该参数不需要调用函数，直接传递函数即可。其中第一个参数设置颜色，可以为任何合法的颜色值，第二个值设置颜色的位置，取值为百分比（0~100%）或者数值，也可以省略步长设置。 直线渐变的基本用法 /*设置角度值*/ background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0)); 径向渐变的基本语法 -moz-radial-gradient([<position> || <angle>,]?[shape] || <size>,]? <syop>,<stop>[,<stop>]*) 该函数的参数说明： <point>:定义渐变起始点，取值包含数值，百分比，也可以使用关键字，其中left，center 和 right关键字定义x 轴坐标，top，center 和 bottom 关键字定义 y 轴坐标。当指定一个值时，则另一个值默认为center。 <angle>:定义直线渐变的角度。单位包括deg，grad（梯度，90度 = 100grad），rad （弧度，一圈等于2*PI rad）。 <stop>：定义步长，用法与Webkit引擎的color-stop()函数相似，但是该参数不需要调用函数，直接传递函数即可。其中第一个参数设置颜色，可以为任何合法的颜色值，第二个值设置颜色的位置，取值为百分比（0~100%）或者数值，也可以省略步长设置。定义圆半径，或者椭圆的轴长度n。 （编辑：云计算网_泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330476号