王鹏飞

Blog

Tutorial

About

CSS

2021年8月26日

渐变

通过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
    );
}

附:资源

附:参考

(完)

【css教程】019 函数
【css教程】021 动画

留言(0


发表评论

邮箱地址不会被公开。*表示必填项