html背景渐变 and 边框渐变

html背景渐变 and 边框渐变

一.html背景渐变

background: linear-gradient(
    to right,//从左往右渐变
    rgba(8, 202, 210, 0) 0%,
    rgba(8, 202, 210, 0.5) 30%,
    rgba(8, 202, 210, 0.8) 50%,
    rgba(8, 202, 210, 0.5) 80%,
    rgba(8, 202, 210, 0) 100%
  );//第四位是透明度，后面的百分比是位置；颜色可以设置多个，我这里是同一个样色的透明度的渐变

二.边框渐变

border: 2px transparent solid;
border-image: linear-gradient(to right, transparent, #23b7cb) 1 10;

还可以试试不同的颜色渐变哦！