网站制作教程:CSS 渐变颜色代码示例

你的网络首码项目网 网站建设来源:你的网络首码项目网评论240字数 3667阅读模式

线性渐变 — 默认,2 种颜色:linear-gradient_default_two_colors

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(yellow, red);
    }
</style>

<div class="box">这是一个线性渐变。</div>

线性渐变 — 3 种颜色,包括透明:linear-gradient_default_three_colors_including_transparent

<!DOCTYPE html>
<title>My Example</title>
<style>
    body {
        background-image: url('/pix/samples/bg2.png');
    }
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(blue, transparent, red);
    }
</style>

<div class="box">这具有线性渐变。</div>

线性渐变 — 偏移:linear-gradient_offset

<!DOCTYPE html>
<title>My Example</title>
<style>
    body {
        background-image: url('/pix/samples/bg2.png');
    }
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(blue -200px, transparent);
    }
</style>

<div class="box">这具有线性渐变。</div>

线性渐变 — 到底部:linear-gradient_to_bottom

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(to bottom, blue, yellow, red);
    }
</style>

<div class="box">这具有线性渐变。</div>

线性渐变 — 到顶部:linear-gradient_to_top

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(to top, blue, yellow, red);
    }
</style>

<div class="box">这具有线性渐变。</div>

线性渐变 — 向右:linear-gradient_to_right

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(to right, blue, yellow, red);
    }
</style>

<div class="box">这具有线性渐变。</div>

线性渐变 — 向左:linear-gradient_to_left

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(to left, blue, yellow, red);
    }
</style>

<div class="box">这具有线性渐变。</div>

线性渐变 — 底部,右侧:linear-gradient_to_bottom_right

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(to bottom right, blue, yellow, red);
    }
</style>

<div class="box">这具有线性渐变。</div>

线性渐变 — 到底部,向左:linear-gradient_to_bottom_left

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(to bottom left, blue, yellow, red);
    }
</style>

<div class="box">这是一个线性渐变。</div>

线性梯度 — 特定角度:linear-gradient_specific_angle

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: linear-gradient(45deg, blue, yellow, red);
    }
</style>

<div class="box">这具有线性渐变。</div>

重复线性渐变:repeating-linear-gradient

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: repeating-linear-gradient(yellow 20%, orange 40%);
    }
</style>

<div class="box">这具有重复的线性渐变。</div>

重复线性渐变 — 对角线:repeating-linear-gradient_diagonal

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: repeating-linear-gradient(to bottom right, yellow 20%, orange 40%);
    }
</style>

<div class="box">这具有重复的线性渐变。</div>

径向渐变:radial-gradient

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        background: radial-gradient(yellow, red);
        border: solid;
        font-size: 5vw;
        text-align: center;
        padding: 10vw;
    }
</style>

<div class="box">这具有径向渐变。</div>

径向渐变 — 圆:radial-gradient_circle

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        background: radial-gradient(circle, yellow, red);
        border: solid;
        font-size: 5vw;
        text-align: center;
        padding: 10vw;
    }
</style>

<div class="box">这是一个径向渐变。</div>

重复径向渐变:repeating-radial-gradient

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: repeating-radial-gradient(yellow 20%, orange 40%);
    }
</style>

<div class="box">这有一个重复的径向渐变。</div>

重复径向渐变 — 圆:repeating-radial-gradient_circle

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        font-size: 5vw;
        padding: 10vw;
        border: solid;
        background: repeating-radial-gradient(circle, yellow 20%, orange 40%);
    }
</style>

<div class="box">这具有重复的径向渐变。</div>
文章源自你的网络首码项目网-https://www.youranweb.com/275.html
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论