线性渐变、文本两边横线、边框颜色小案例

案例1：实现文本左右划线

• 需要留意的点：
  1.linear-gradient(,...)中第一个参数值默认为180deg，即从上往下渐变。
  2.text-align css属性控制它的行内内容的对齐,(不单单是文字)

h2{			 
    width: 400px;
    text-align:center;
    line-height:50px;
    /* background:linear-gradient(180deg,transparent 49% ,#000 49%,#000 52% ,transparent 51%); */
    background:linear-gradient(180deg,transparent 0 49% ,#000 49% 52%,transparent 52%);			  
    span{
    padding:0 10px;
    background:#fff;
    }
}

效果图如下所示：

案例2：实现类似边框不同颜色

div{
    width: 200px;
    height: 20px;
    background-image: linear-gradient(to right,tomato 25%,aqua 25% 50%,pink 50% 75%,orange 75%);
    }

效果图如下