渐变背景及边框实现

CSS

.warning{
  height: 2rem;
  line-height: 1.8rem;
  font-size: calc(100vw * 13 / 1920);
  padding-left: .5rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #4c2650, #001f49),linear-gradient(90deg, #f93b61, #001f49);

  .img{
    width:1.2rem;
    padding-top: 3px;
    padding-right: 5px;
  }
}

html:

<div class="warning"> <img class="img" src="../../../assets/warning.png" alt="">5月达成值连续3个月增长，请重点关注</div>