设计图:
现在的要求是不准用图片,好吧,那就用代码简单实现下。
方式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;
}
}
效果:
就这个了!