css小技巧 linear-gradient

设计图：

现在的要求是不准用图片，好吧，那就用代码简单实现下。

方式1：svg

效果：

太丑，不行

方式2：背景渐变,中间套一层白色背景，保留边框1px

 

    
报表查询
 


  .box {
    display: inline-block;
    padding: 1px;
    background: linear-gradient(90deg,#fff,#ccc);
    border-radius: 8px;
    .btn-box{
      padding: 10px 20px;
      display: inline-block;
      background: #ffffff;
      border-radius: 8px;
     }
   }

效果：

效果一般，勉强能用。

但是，UI改设计了，白色底不好看，改透明了，这种背景色渐变的就不能用了。

方式3：border边框渐变

  
报表查询


  .box {
    text-align: center;
    border-radius: 8px;
    border-right: 1px solid #495B6A;
    box-sizing: border-box;

    .btn-box{
      width: 94px;
      height: 34px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid;
      border-bottom: 1px solid;
      border-image: linear-gradient(90deg, transparent 60%, #495B6A 90%, transparent 97%) 1;
    }
  }

效果：

就这个了!