设置边框颜色渐变及背景颜色渐变

     <div class="a">//边框由a实现

            <div class="b">渐变背景</div>

      </div>

css部分

.a{

      width: 420px;

      height: 50px;

      padding:  6px;

      border-radius:  24px;

      background-image: linear-gradient(to bottom left, rgba(10,16,68,0) 55%, rgba(33,186,214,1) 100%);

      .b{

        width: 100%;

        height: 100%;

        border-radius:  24px;

        background-image: linear-gradient(to bottom left, #ffea00 30%, #83fd00 100%);

      }

   }

本质上就是a添加背景色,然后a给内边距使其与b之间出现一定距离来充当边框