代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style>
div{
width: 300px;
height: 100px;
margin: 50px;
padding: 50px;
border: 5px groove rgba(120, 120, 120,0.5);
}
#div1{ background-image: linear-gradient( red,blue);}
#div2{background-image: linear-gradient( to right,red,blue);}
#div3{background-image: linear-gradient( to right bottom,red,blue);}
#div4{background-image: linear-gradient( 60deg,red,blue);}
#div5{background-image: linear-gradient( red,blue,green, orange);}
#div6{background-image: linear-gradient( 60deg, red 10%,blue 30%,green 60%, orange 80%);}
#div7{background-image: linear-gradient( 60deg, red 30px,blue 80px,green 120px, orange 300px);}
#div8{background-image: repeating-linear-gradient( 60deg,green 30px, orange 50px);}
</style>
</head>
<body>
<div id="div1">111</div>
<div id="div2">222</div>
<div id="div3">333</div>
<div id="div4">444</div>
<div id="div5">555</div>
<div id="div6">666</div>
<div id="div7">777</div>
<div id="div8">888</div>
</body>
</body>
</html>
原图
效果图
线性渐变 linear-gradient()
background-image: linear-gradient( red,blue); 两种颜色渐变，方向默认由上至下
background-image: linear-gradient( to right,red,blue);添加方向属性，改变渐变颜色
background-image: linear-gradient( to right bottom,red,blue);添加方向属性，改变渐变颜色
background-image: linear-gradient( 60deg,red,blue);添加角度，60°渐变
扫一扫
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
