css实现渐变⾊
⽇常中最常⽤到的渐变⾊是背景和边框(⼀条线的渐变⾊可以考虑使⽤div，然后根据需求设置⾼度)两种
⾸先来了解⼀下绘制渐变⾊的⾓度与⽅向
第⼀种：背景
使⽤到的属性为background，接下来看三个关于背景渐变最常⽤到的实例(有详细注释，⽅便理解；设置渐变⾊的⾓度可以根据需求进⾏相应的修改；设置渐变⾊的颜⾊参数可根据⾃⼰的需求进⾏相应的增删)
1.背景的横向渐变(渐变的⽅向由左到右)：
①：效果图
②：JS代码
1.1 背景的横向渐变(由左到右):
<div  id="line1_1"></div>
③：CSS样式
#line1_1{
width:1000px;
height:20px;
background:linear-gradient(90deg, /* 90度⽅向上绘制渐变⾊  */
/* 0-10%：红⾊; 10-20%：透明⾊ ; 20-30%：红⾊ ;30-50%：由红⾊逐渐变成透明⾊透明⾊;
50-70%：红⾊ ; 70-80%：由透明⾊逐渐变成红⾊; 80-100%：红⾊;*/
red 10%,transparent 10%,transparent 20%,red 20%,red 30%,
transparent 50%,red 50%,red 70%,transparent 70%,red 80%);
}
2.背景的纵向渐变(渐变的⽅向由下到上)：
①：效果图
②：JS代码
1.2 背景的纵向渐变 (由下到上):
<div  id="line1_2"></div>
③：CSS样式
#line1_2{
width:500px;
height:200px;
background:linear-gradient(0deg,red 10%, transparent 10%,transparent 20%,
red 20%,red 30%,transparent 50%,red 50%,red 70%,transparent 70%,red 80%);
}
3.背景任意⾓度的渐变(左上和右下有三⾓形)：
①：效果图
②：JS代码
1.3 背景任意⾓度的渐变:
<div id="line1_3">上下⾓处背景透明</div>
③：CSS样式
#line1_3{
width:150px;
height:100px;
line-height:100px;
text-align:center;
background-color:black;
background:linear-gradient(130deg,red 8%,transparent 8%,transparent 9%,
red 9%,red 90%,transparent 90%,transparent 91%,red 91%);
}
第⼆种：边框
使⽤到的属性为border-image，接下来看四个关于背景渐变最常⽤到的实例(有详细注释，⽅便理解；设置渐变⾊的⾓度可以根据需求进⾏相应的修改；设置渐变⾊的颜⾊参数可根据⾃⼰的需求进⾏相应的增删，具体⽅向的边框可根据需求设置显⽰与否【border-X:0】)
1.  div边框的横向双线渐变(渐变的⽅向由左到右)：
②：JS代码
3.1.1 div边框的横向双线渐变(由左到右):
<div  id="line3_1_1"></div>
③：CSS样式
#line3_1_1{
width:1000px;
height:20px;
border:0px ;
border-top:1px  solid;
border-bottom:1px  solid; /* 上下边框为1px，其余⽅向没有 */
border-image:linear-gradient(90deg,red 10%, transparent 10%,transparent 20%,
red 20%,red 30%,transparent 50%,red 50%,red 70%,transparent 70%,red 80%) 1 1;    }
2.  div边框的横向单线渐变(渐变的⽅向由左到右)：
①：效果图
②：JS代码
3.1.2  div边框的横向单线渐变(由左到右):
<div  id="line3_1_2"></div>
③：CSS样式
#line3_1_2{
width:1000px;
height:20px;
border:0px ;
border-bottom:1px  solid; /*只有下边框，其他边框均为0PX(不显⽰)*/
border-image:linear-gradient(90deg,red 10%, transparent 10%,transparent 20%,
red  20%,red 30%,transparent 50%,red 50%,red 70%,transparent 70%,red 80%) 1 1;    }
3.  div边框的纵向双线渐变(渐变的⽅向由下到上)：
①：效果图
3.2.1 div边框的纵向双线渐变 (由下到上):
<div  id="line3_2_1"></div>
③：CSS样式
#line3_2_1{
width:500px;
height:200px;
border:0px;
border-left:1px  solid;
border-right:1px  solid;/* 左右⽅向上有边框，其余⽅向上均⽆边框 */
htmlborderborder-image:linear-gradient(0deg,red 10%, transparent 10%,transparent 20%,
red 20%,red 30%,transparent 50%,red 50%,red 70%,transparent 70%,red 80%) 1 1;    }
4.  div边框的纵向单线渐变(渐变的⽅向由下到上)：
①：效果图
②：JS代码
3.2.2  div边框的纵向单线渐变 (由下到上):
<div  id="line3_2_2"></div>
③：CSS样式
#line3_2_2{
width:500px;
height:200px;
border:0px;
border-left:1px  solid;
border-image:linear-gradient(0deg,red 10%, transparent 10%,transparent 20%,
red 20%,red 30%,transparent 50%,red 50%,red 70%,transparent 70%,red 70%) 1 1;    }
3.边框任意⾓度的双线渐变(右上和左下对⾓处透明留⽩)：
①：效果图
②：JS代码
3.3.1  div边框任意⾓度的双线渐变(可根据需求将"多余"的边框设置为0):
<div id="line3_3_1">上下斜对处透明</div>
③：CSS样式
#line3_3_1{
width:150px;
height:100px;
line-height:100px;
text-align:center;
border:1px solid;
border-image:linear-gradient(132deg,red 40%, transparent 40%,transparent 55%,        red 55%) 1 1;
}
4.边框任意⾓度的双线渐变(右上和左下对⾓处有边框，其余地⽅透明)：
①：效果图
②：JS代码
3.3.2  div边框任意⾓度的双线渐变(可根据需求修改⾓度):
<div id="line3_3_2">出⾓外均透明</div>
③：CSS样式
#line3_3_2{
width:150px;
height:100px;
line-height:100px;
text-align:center;
border:1px solid;
border-image:linear-gradient(148deg,transparent 40%, red 40%,red 65%,
transparent 65%) 1 1;
}
⾓度和颜⾊以及颜⾊段都是可以灵活变通的，可根据需求⾃⼰设定

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。