资讯

手机用华为 • 推广找展为

十年专注 提供有品质的服务 13933871212

石家庄高端网站开发CSS知识

专注:石家庄网站制作 | 咨询 13933871212(同微信) 2020-08-23 21:25:01

石家庄高端网站开发 CSS3线性渐变指南  渐变是CSS3中很棒的色彩功能。现在,我们不仅可以添加一种颜色,还可以在一个声明块中添加多种颜色组合,而无需依赖图像,这可以减少我们网站中的HTTP请求,从而使网站加载速度更快。
 
如果您在CSS3中使用过渐变,则您可能熟悉两种方法:径向渐变和线性渐变。今天的帖子将是关于后者的。
 
创建渐变
正如规范说的,CSS3中的渐变是一幅图像,它没有像其他新功能一样具有特殊的属性,因此它是使用background-image属性来声明的。
 
如果我们看一下渐变的完整语法,它看起来有点用力过度,这可能会导致某些人感到困惑。
 
 
div {
  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
因此,让我们一一深入研究语法的每个部分,以使事情变得更清楚。
 
首先,使用linear-gradient()函数声明线性梯度。该函数具有三个主要值。第一个值定义梯度的起始位置。您可以使用描述性关键字,例如top从顶部开始渐变;
 
1个
2
3
div {
  background-image: linear-gradient(top, #FF5A00, #FFAE00); 
}  
上面的代码段是W3C用来创建渐变的正式版本。它实际上更简单,也很容易解释,并且还会创建以下渐变。
 
 
 
石家庄高端网站开发渐变顶部
您也可以使用bottom相反的方法,否则使用rightand left。
 
我们还可以使用对角线渐变angle degree作为起始位置来创建对角线渐变。这是一个例子:
 
1个
2
3
div {
  background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
}
上面的代码段将创建以下颜色渐变:
 
斜对角线
函数的第二个值将告诉第一个颜色信息及其停止位置,以百分比表示。停止位置实际上是可选的;浏览器足够聪明来确定正确的位置,因此当我们不指定第一种颜色的停止位置时,浏览器将0%作为默认颜色。
 
并且,下一个值是第二个颜色组合。它的工作方式与之前的值相同,仅当它是最后应用的颜色且我们未指定停止位置时,才将值100%用作默认值。现在,让我们看下面的示例:
 
1个
2
3
div {
  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
上面的代码段将创建一个渐变,就像我们之前看到的一样(没有区别),但是现在我们指定了颜色停止位置;
 
石家庄高端网站开发渐变顶部
现在让我们更改颜色stop,这一次我们将指定50%第一种颜色和51%第二种颜色,然后看看结果如何。
 
1个
2
3
div {
  background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
}
梯度停止
透明度
transparency也可以渐变创建。要创建效果,我们需要将颜色hex转换为rgba模式并降低Alpha通道。
 
1个
2
3
div {
  background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));
上面的代码段会将色彩强度降低20%,渐变会像这样:
 
渐变透明
多种颜色
如果要添加更多颜色,只需用逗号定界符在其他颜色旁边添加颜色,然后让浏览器确定每种颜色的停止位置。
 
1个
2
3
div {
  background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}
上面的代码段将创建以下彩虹。
 
石家庄高端网站开发渐变彩虹
浏览器兼容性
不幸的是,在撰写本文时,当前所有的浏览器都尚未支持标准语法。他们还需要供应商前缀(-webkit-,-moz-,-ms-和-o-)。因此,这就是为什么完整的语法如下所示:
 
div {
  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
另一方面,Internet Explorer(特别是版本9和更低版本)与标准相差甚远。IE9及更低版本中的渐变用声明filter,因此,如果要在这些浏览器上添加渐变,则必须编写如下代码;
 
1个
2
3
div {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);
}
它filter有其局限性:首先,它不允许添加三种以上的颜色,并且创建透明效果也有些棘手-不允许rgba,但是IE filter使用#ARGB;
 
1个
2
3
div {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);
}
这里是为了帮助一个工具,你转换rgba到#ARGB。
 
演示版
下载源
更快地编写语法
如您在上面看到的,为了保持跨浏览器的梯度兼容性,我们需要再添加五行效率低下的代码。
 
我们可以采取许多方法来简化任务。例如使用Prefix-free,Prefixr,LESS或Sass来帮助编译代码,但最重要的是,我们建议使用ColorZilla Gradient这个工具。该工具将简单地生成渐变所需的所有代码,以使其在所有浏览器中均有效。
 
最后的话
今天,我们在创建渐变方面进行了很多讨论,我们研究了语法的每个部分,创建透明效果并保持了浏览器兼容性。因此,在这一点上,我们希望您已经对该主题有了更好的理解。
 
我们计划在以后的文章中仍然打算在CSS3 Gradients上探索很多东西,所以请继续关注Hongkiat.com。最后,感谢您阅读本文,我们希望您喜欢它。
 
10年建站推广经验

让您每一分投入都有更多回报!

联系展为,马上获得专属免费推广方案

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:13933871212   固定电话:0311-80836913   微信:9196389