css实现渐变色

日常中最常用到的渐变色是背景和边框(一条线的渐变色可以考虑使用div，然后根据需求设置高度)两种

首先来了解一下绘制渐变色的角度与方向

css实现渐变色

第一种：背景

使用到的属性为background，接下来看三个关于背景渐变最常用到的实例(有详细注释，方便理解；设置渐变色的角度可以根据需求进行相应的修改；设置渐变色的颜色参数可根据自己的需求进行相应的增删)

1.背景的横向渐变(渐变的方向由左到右)：

①：效果图

css实现渐变色

②：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.背景的纵向渐变(渐变的方向由下到上)：

①：效果图

css实现渐变色

②：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.背景任意角度的渐变(左上和右下有三角形)：

①：效果图

css实现渐变色

②：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边框的横向双线渐变(渐变的方向由左到右)：

①：效果图

css实现渐变色

②：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边框的横向单线渐变(渐变的方向由左到右)：

①：效果图

css实现渐变色

②：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边框的纵向双线渐变(渐变的方向由下到上)：

①：效果图

css实现渐变色

②：JS代码

 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;/* 左右方向上有边框,其余方向上均无边框 */
    border-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边框的纵向单线渐变(渐变的方向由下到上)：

①：效果图

css实现渐变色

②：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.边框任意角度的双线渐变(右上和左下对角处透明留白)：

①：效果图

css实现渐变色

②：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.边框任意角度的双线渐变(右上和左下对角处有边框，其余地方透明)：

①：效果图

css实现渐变色

②：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;
    }

角度和颜色以及颜色段都是可以灵活变通的，可根据需求自己设定

第一种：背景

第二种：边框

相关推荐