乐趣区

关于前端: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;
}
退出移动版