实现渐变背景叠加渐变圆角边框

常规的bgcolor+border实现不了渐变圆角边框，所以如何做呢？？？

1.直接使用切图

优点：最简单缺点：背景图缩放过程中圆角变形

css 复制代码

background:url('xxx')

2.三段式拼接

左中右三段样式，圆角和中间内容区域拼接。

优点：这个没有优点

缺点：渐变的位置太容易变化，拼接处容易有断层、实现起来复杂

css 复制代码

.left: {
  background: url('xxx1')
}
.center {
  background: url('xxx2')
}
.right {
  background: url('xxx3')
}

3.mask实现

通过元素container里after伪类元素上加mask带边框的半透明背景实现

优点：背景半透明、100%还原设计稿无变形

缺点：部分机型有兼容问题,mask-composite部分内核不支持

css 复制代码

.item {
  position: relative;
  padding: 0 15px !important;
  background: linear-gradient(to right, rgba(255,255,255,0 ) 0%,rgba(255,255,255,0) 40%,#18013C 60%, #862B2B 100%);
  border-radius: 22px !important;
  box-sizing: border-box;
  &::before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    content: '';
    box-sizing: border-box;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 22px;
    padding: 2px;
    /* 边框颜色 */
    background: linear-gradient(to right,rgba(255,60,104,0.1) 0%, #FF3C68 100%);

    -webkit-mask: linear-gradient(#fff 0 100%) content-box,
                                  linear-gradient(#fff 0 100%);
    mask: linear-gradient(#fff 0 100%) content-box,
                          linear-gradient(#fff 0 100%);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

}

4.padding-box结合border-box

背景分两块，一块用padding-box画背景，一块用border-box画边框，设置固定宽度的透明border作为占位，背景图前半部分是透明，如设计稿所示，用黑色替代

优点：代码简单、还原度高、无变形、无兼容

缺点：背景图不能渐变

css 复制代码

.apm-barrage-item {
  position: relative;
  padding: 0 15px;
  background:
  linear-gradient(to right, #18013C 0%,#18013C 30%, #862B2B 100%) padding-box,
    linear-gradient(to right,rgba(255,60,104,0.1) 0%, #FF3C68 100%) border-box;

  border: 3px solid transparent !important; /* 占位边框 */
  border-radius: 22px !important;
  box-sizing: border-box;
}

5.after伪类

设置元素本身带边框颜色的样式，after伪类内缩1px，设置内容渐变

优点：代码简单、还原度高、无变形、无兼容

缺点：背景图不能渐变

css 复制代码

.apm-barrage-item{
    position: relative;
    padding: 15px !important;
    background: linear-gradient(to right, rgba(255, 60, 104, 0.1) 0%, #ff3c68 100%);
    border-radius: 22px;
    font-size: 30px;
    max-width: 300px;
    margin: 0 auto;
    &::after {
      position: absolute;
      display: block;
      z-index: 1;
      content: '';
      box-sizing: border-box;
      top: 1px;
      right: 1px;
      bottom: 1px;
      left: 1px;
      border-radius: 22px;
      background: linear-gradient(to right, #18013C 0%,#18013C 30%, #862B2B 100%);
    }
  }

总结下来，3、4和5的方案是最佳选择。3适合只适配主流浏览器，4和5比较通用。