使用纯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
指定了渐变的方向,即从左上角到右下角。red
和blue
则是渐变的起始颜色和结束颜色。
你可以将这段代码添加到你的CSS文件中,或者将它直接插入到HTML文件的<style>
标签内。然后,当你打开HTML文件时,你应该会看到一个具有线性渐变背景的页面。
如果你想尝试不同的渐变方向和颜色,只需相应地调整linear-gradient()
函数的参数即可。例如,你可以尝试将渐变方向改为to left
或45deg
,或者将颜色改为green
和yellow
等。