CSS基础教程

 主页   资讯   文章   代码   电子书 

渐变

通过css渐变，可以在不使用任何图片的情况下创建非常棒的效果。本节内容，一起看一下css中的各种渐变。

假设公司的UI递过来一份web设计稿让你完成。主页面的header是一段文字和一个按钮，背景是一个渐变色的背景图，你如何去完成这个header呢？

css渐变

如果你没有用过css渐变，你可能会想到用图片处理软件创建一个背景图，然后使用background属性设置header的背景图片来完成任务。但是css提供了linear-gradient，可以很方便的解决这个问题。

渐变本质上是一张图片，可以被用在任何可以使用图片的地方来代替图片，例如background-image。

css可以创建多种渐变，接下来我将详细介绍各种渐变。

一.线性渐变

linear-gradient()函数可以通过两个或者多个颜色生成一张图片。它接受多个参数，你可以将一些颜色传递给它，它会将这些颜色均匀的设置在背景的相应位置，然后进行均匀渐变，生成一张图片。下面的例子设置了background: linear-gradient(red, orange, yellow, green, cyan, blue, purple);。

默认的颜色渐变方向是从上至下的。你可以通过to <direction>更改默认的渐变方向。

.ele {
    background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
}

通过to right指定渐变方向是从左至右的。指定两个方向可以将渐变方向改成对角线渐变。

.ele {
        background: linear-gradient(to bottom right, red, orange, yellow, green, cyan, blue, purple);
}

还可以通过角度和位置更改渐变的位置和方向。

.ele {
    background: linear-gradient(45deg, black 30%, white);
}

45deg表示将渐变的方向旋转45度，从black颜色开始，一直到30%的位置开始慢慢渐变成white。

指定角度和渐变开始的位置也支持设置多种颜色。

.ele {
    background: linear-gradient(45deg, darkred 20%, crimson, darkorange 60%, gold, bisque);
}

上面的代码表示渐变的方向是45度，颜色开始是darkred，在20%位置时渐变到crimson，再渐变到darkorange，然后以darkorange一直持续到60%的位置再开始渐变到gold，最后渐变到bisque。

二.径向渐变

径向渐变指的是从某一点向四周扩散渐变。使用radial-gradient()函数创建径向渐变图片。

.ele {
    background: radial-gradient(white, black);
}

和linear-gradient一样，可以指定多个渐变色和渐变位置。

.my-element {
    background: radial-gradient(darkred 20%, crimson, darkorange 60%, gold, bisque);
}

三.旋转渐变（Conic gradient）

旋转渐变有一个中心点，默认从上方开始，绕着中心点旋转渐变。

.ele {
    background: conic-gradient(white, black);
}

可以指定中心位置，和开始渐变的角度。

.ele {
    background: conic-gradient(from 10deg at 20% 30%, white, black);
}

和其他渐变用一样，可以指定渐变颜色位置、设置多个颜色。可以用这个绘制饼图。

四.重复和混合

每种渐变都有对应的重复类型。分别是repeating-linear-gradient()、repeating-radial-gradient()和repeating-conic-gradient()。它们和非重复渐变类似，接受的参数也相同，区别是它们可以重复模式去填充盒子。

如果你的渐变没有重复，那么可能是因为你没有设置颜色的区域长度。

.my-element {
    background: repeating-linear-gradient(
        45deg,
        red,
        red 30px,
        white 30px,
        white 60px
    );
}

附：资源

（完）