使用纯css画一个线性渐变的背景

要使用纯CSS创建一个线性渐变的背景,你可以使用linear-gradient()函数。以下是一个简单的例子,它创建了一个从左上角到右下角的线性渐变,颜色从红色过渡到蓝色:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right bottom, red, blue);
}

在这个例子中,linear-gradient()函数接受两个参数:渐变的方向和渐变的颜色。to right bottom指定了渐变的方向,即从左上角到右下角。redblue则是渐变的起始颜色和结束颜色。

你可以将这段代码添加到你的CSS文件中,或者将它直接插入到HTML文件的<style>标签内。然后,当你打开HTML文件时,你应该会看到一个具有线性渐变背景的页面。

如果你想尝试不同的渐变方向和颜色,只需相应地调整linear-gradient()函数的参数即可。例如,你可以尝试将渐变方向改为to left45deg,或者将颜色改为greenyellow等。

posted @ 2024-12-17 09:22  王铁柱6  阅读(116)  评论(0)    收藏  举报