本文介绍了一种使用CSS设置div元素背景为线性渐变的方法。通过调整角度及颜色值，可以创建从左到右渐变的效果，具体实现为从#fff1eb渐变到#ace0f9。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;margin:0;
}
div{
width: 1000px;
height:100px;
margin:50px auto;
/*background:blue;*/
/*background:linear-gradient(150deg,green 50%,black 100%);*/
/*background:linear-gradient(
pink 0%,
red 25%,
green 30%,
yellow 75%,
blue 80%,
skyblue 100%
);*/
background:linear-gradient(
to right,#fff1eb,#ace0f9
);
}
/*线性渐变,
background:linear-gradient(
渐变角度,
开始值,
结束值,
开始值,
结束值
);*/
</style>
</head>
<body>
<div></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;margin:0;
}
div{
width: 1000px;
height:100px;
margin:50px auto;
/*background:blue;*/
/*background:linear-gradient(150deg,green 50%,black 100%);*/
/*background:linear-gradient(
pink 0%,
red 25%,
green 30%,
yellow 75%,
blue 80%,
skyblue 100%
);*/
background:linear-gradient(
to right,#fff1eb,#ace0f9
);
}
/*线性渐变,
background:linear-gradient(
渐变角度,
开始值,
结束值,
开始值,
结束值
);*/
</style>
</head>
<body>
<div></div>
</body>
</html>
扫一扫
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
