Css | 边框圆角渐变色

起因：

设计给的图中输入框是一个圆角渐变色边框，

需求
按照自己两毛半的认知翻来覆去尝试了半天也没成功，才发现设置渐变色的background-image与设置圆角的border-radius不能并存。一番研究后总结出如下方法：

body {
  background-color: black;
}

div {
  width: 500px;
  height: 50px;
  border: none;
  box-sizing: border-box;
  padding: 1px;
  border-radius:5px;

  /*第一个linear-gradient里的两个颜色需要和底色相同*/
  background-image: linear-gradient(black, black), linear-gradient(45deg, #1FA2FF, #12D8FA);
  background-clip: content-box,padding-box;
}

结论：

还没高兴两分钟就得到设计答复

ui答复 我他喵.png