css设置文本、背景、边框渐变色

linear-gradient函数

了解css线性渐变的函数

linear-gradient(direction, color-stop1, color-stop2, ...);

direction 代表渐变方向，详细如下：

color-stop1，color-stop2.. 代表渐变的颜色。

还可以在颜色后面加上百分比，例如#333 10%,#fff 50% ,#ff0000 100% 。

background-image:linear-gradient(to bottom ,#333 10%, #fff 50%, #ff0000 100%)

实战

文字渐变

我要给一个文字加上一个渐变色。

.text {
    background: linear-gradient(to bottom, red 0%, blue 100%);
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
}

背景渐变

给div添加一个从左上到右下的背景渐变。

.bg {
    background-image: linear-gradient(to bottom right,#fff 0%,#000 100%);
}

html部分

<div
    class="bg"
    style="text-align: center;padding: 100px 0;width: 1000px;margin: 0 auto;"
>
    <p class="text">编程领地，开发者之家</p>
</div>

边框渐变

background-image 和border-image 可以实现边框的渐变。border-image 需要ie11以上才支持。

background-image

.border {
    border: 10px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff),linear-gradient(90deg, #8f41e9, #578aef, red);
}