div{
300px;
height: 100px;
margin: 50px;
padding: 50px;
border:5px groove rgba(200,60,30,0.8);
}
#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,orange,green);
}
#div6{
background-image: linear-gradient(60deg,red 10%,blue 30%,orange 60%,green 80%);
}
#div7{
background-image: linear-gradient(60deg,red 10px,blue 30px,orange 60px,green 300px);
}
#div8{
/*background: linear-gradient(60deg,orange 20px,red 40px);*/
background: repeating-linear-gradient(60deg,orange 20px,red 40px);
}
#div9{
background: radial-gradient(red,blue,green);
}
#div10{
background: radial-gradient(circle,red,blue,orange);
}
#div11{
background: radial-gradient(circle at right,red,blue,orange);
}
#div12{
background: radial-gradient(circle at right top,red,blue,orange);
}
#div13{
background: radial-gradient(circle 50px,red,blue,orange);
}
#div14{
background: radial-gradient(circle closest-side,red,blue,orange);
}
#div15{
background: radial-gradient(circle farthest-side,red,blue,orange);
}
#div16{
background: radial-gradient(circle closest-corner,red,blue,orange);
}
#div17{
background: radial-gradient(circle farthest-corner,red,blue,orange);
}
#div18{
background:repeating-radial-gradient(circle 5px,red,orange);
}
html5-css渐变色
天道酬勤,厚积薄发。
君子之行,静以修身,俭以养德。
非淡泊无以明志,非宁静无以致远。
如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。