CSS 渐变属性linear-gradient

2020-07-17 14:53 更新

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

  • 渐变轴为45度,从蓝色渐变到红色

    linear-gradient(45deg, blue, red);

  • 从右下到左上、从蓝色渐变到红色

    linear-gradient(to left top, blue, red);

  • /从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束

    linear-gradient(0deg, blue, green 40%, red);

实例:

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

结果:


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

结果:


background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

结果:


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函数可以实现线形重复渐变效果。

  • 由于<gradient>数据类型系<image>的子数据类型,<gradient>只能被用于<image>可以使用的地方。因此,linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。



以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部