html线性渐变颜色

从左到右的线性渐变效果背景色

background: linear-gradient( #ff00ff, #00ffff);

改变渐变方向

默认情况下，线性渐变的方向是从上到下，你可以指定一个值来改变渐变的方向。

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

对角线渐变你甚至可以设置渐变方向为从一个对角到另一个对角。

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

渐变的边框颜色


        border: 3px solid;/*边框*/
        border-image: linear-gradient(to right, #8f41e9, #578aef) 1;/*渐变边框颜色*/