设计图：

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

方式1：svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="-30" y="1" rx="8" ry="8" width="64" height="34" 
style="fill:#ffffff;stroke:black;stroke-width:1;" />
</svg>

效果：

太丑，不行

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

 <div class="box"><div class="btn-box">报表查询</div></div>.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边框渐变

<div class="box"><div class="btn-box">报表查询</div>
</div>.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;}}

效果：

就这个了!