Css3颜色渐变有两种

时间:2020-05-01

linear-gradient

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);

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .parent {
            background-image: linear-gradient(#e66465, #9198e5);
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="parent"></div>
</body>
</html>

radial-gradient

CSS radial-gradient() 函数创建了一个图片,其由一个从原点辐射开的在两个或者多个颜色之前的渐变组成。这个方法得到的是一个CSS<gradient>数据类型的对象,其是 <image> 的一种。

与其他渐变相同,径向渐变是一个不固定尺寸的图片,譬如,它没有默认尺寸、比例。具体尺寸由它所定义的元素尺寸决定。

因为 <gradient> 属于 <image> 类型,所以它可以用于任何适用于 <image> 的地方。正是因为这样,radial-gradient() 不能用于 background-color 和其他属性比如 <color> 数据类型。

如需要填充容器的循环渐变,请使用CSS的repeating-radial-gradient 方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .parent {
            background-image: radial-gradient(#e66465, #9198e5);
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="parent"></div>
</body>
</html>