前言
对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 }