按钮渐变边框

• border-image

INFO

不想用伪类可以用 border-image 设置不一样的边框

查看代码

<template>
  <div class="container">
    <button>默认添加</button>
    <button>后跟个1</button>
    <button>上下左右可分别设置</button>
    <button>上下左右可分别设置</button>
  </div>
</template>

<style lang="less" scoped>
button {
  padding: 4px 8px;
  background: #eee;
  border: 6px solid;
  margin: 0 4px;
}
.container {
  button:nth-child(1) {
    border-image: linear-gradient(to right, #0066ff, #ff32d6);
  }
  button:nth-child(2) {
    border-image: linear-gradient(to right, #0066ff, #ff32d6) 1;
  }
  button:nth-child(3) {
    border-image: linear-gradient(to right, #0066ff, #ff32d6) 0 1 0 1;
  }
  button:nth-child(4) {
    border-image: linear-gradient(to right, #0066ff, #ff32d6) 1 0 1 0;
  }
}
</style>