css实现按钮圆角渐变样式_css渐变按钮

最终成果图：

背景：

最近项目数据大屏这个样式给我卡住了，起因是UI设计想要按钮边框渐圆角背景透明渐变，我查找了好多资料也在问答里提问，都没有实现初始样式。原因是如果想用渐变边框就会使用到属性border-image，这个属性有个bug就是不能和border-radius圆角一起使用。用过伪类和盒子的方法试了，如果想通过伪类或盒子去做，那么背景就不能是透明的。因此和UI设计商量了一手，改成了背景不透明的样式，我用的盒子。建议如果有我这种情况的，要么不要渐变边框不要圆角，要么渐变圆角边框不要透明背景。

代码：

<div class="btn-container">
  <!--按钮组-->
  <div class="btn-group">
    <div class="btn-left" :class="activeCountNum===1?'active':''" @click="handleCount(1)">
      <div class="btn">按城市</div>
    </div>
    <div class="btn-center" :class="activeCountNum===2?'active':''" @click="handleCount(2)">
      <div class="btn">按空间</div>
    </div>
    <div class="btn-right" :class="activeCountNum===3?'active':''" @click="handleCount(3)">
      <div class="btn">按产品</div>
    </div>
  </div>
  <!--导出-->
  <div class="btn-export" @click="exportFile">
    <div class="export">导出</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

handleCount(value){
  this.activeCountNum=Number(value)
},
1
2
3

.btn-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  margin:10px 20px 0 20px;
  .btn-group{
    display: flex;
    flex-direction: row;
    height: 32px;
    .btn-left,.btn-center,.btn-right{
      box-sizing: border-box;
      padding: 1px;
      background-image:linear-gradient(180deg, #4DAAFA 0%, #074B98 100%);
      .btn{
        margin-right: 1px;
        color: #ffffff;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        background: linear-gradient(180deg, #11498B 0%, #082F67 100%);
        padding:0 10px;
      }
      &:hover,&:active{
        .btn{
          background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
        }
      }
    }
    .btn-left{
       border-radius: 4px 0 0 4px;
       padding-right: 0px;
       .btn{
          border-radius: 4px 0 0 4px;
          padding: 0 14px;
       }
     }
     .btn-right{
       border-radius: 0 4px 4px 0;
       padding-left: 0px;
       .btn{
         border-radius: 0 4px 4px 0;
       }
     }
     .active{
        .btn{
          background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
        }
      }
    }
    .btn-export{
      width: 70px;
      height: 32px;
      box-sizing: border-box;
      padding: 1px;
      border-radius: 4px;
      background-image:linear-gradient(180deg, #4DAAFA 0%, #074B98 100%);
      .export{
        width: 100%;
        height: 100%;
        color: #ffffff;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        background: linear-gradient(180deg, #11498B 0%, #082F67 100%);
      }
      &:hover,&:active{
        .export{
          background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74