CSS教程

学会css3渐变属性,你这样这篇文章

本文主要是介绍学会css3渐变属性,你这样这篇文章,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

CSS3颜色 渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

这一小节我们来说一下线性渐变:

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型,是一种特别的数据类型。

  • 渐变轴为45度,从蓝色渐变到红色 linear-gradient(45deg, blue, red);
  • 从右下到左上、从蓝色渐变到红色 linear-gradient(to left top, blue, red);
  • 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 linear-gradient(0deg, blue, green 40%, red);

实例1:

background: linear-gradient(#e66465, #9198e5);

效果如下:
图片描述

实例2:

p {
  width: 400px;
  height: 150px;
  line-height: 150px;
  text-align:center;
  color: #000;
  font-size:24px;
  background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);;
}

效果如下:
Image 11.png

实例3:

background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

结果如下:
图片描述

实例4:

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

图片描述

如同其他gradient函数一般,linear-gradient() 函数没有内在尺寸;即,它不具备固有的或首选的尺寸,也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

注意:

  • 利用repeating-linear-gradient函数可以实现线形重复渐变效果。
  • 由于数据类型系的子数据类型,只能被用于可以使用的地方。因此,linear-gradient() 并不适用于background-color以及类似的使用 数据类型的属性中。

感谢您的阅读,创作不易,动动你的小手指,给我点个赞吧,顺便给个关注哦!

这篇关于学会css3渐变属性,你这样这篇文章的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!