css渐变样式

前言

对css样式的操作是大多数新手的头疼之处

例如：对渐变角度的掌握，对渐变的颜色控制，对渐变的多样化却不知道如何设置

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、css有多少中渐变方式？

答案：两种：{线性渐变和径向渐变}

二、使用步骤

1.线性渐变

属性：linear-gradient(开始位置 角度，起始颜色，终止颜色 )
开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top\bottom（可组合使用）
角度：渐变终止方向的角度，当开始位置为数值或百分比的时候可用
起始颜色
终止颜色
重复渐变：将属性修改为：repeating-linear-gradinet()

div{
width: 300px;
 height: 100px;
 margin: 50px;
 padding: 50px;
border: 5px groove rgba(200,60,30,0.8)
}

#div2{
 background-image: linear-gradient(to left,red,blue);
 }

改变渐变方式为从左到右

#div4{
2 background-image: linear-gradient(60deg,red,blue);
3 }

60是角度

#div6{
background-image: linear-gradient(60deg,red 10%,blue 30%,pink 60%,orange 80%);
 }

多种颜色混合使用，可以通过百分比调节占比

#div7{
2 background-image: linear-gradient(60deg,red 30px,blue 80px,pink 120px,orange 300px);
3 }