css小技巧 linear-gradient

Bright20172023-12-08 14:21

设计图：

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

方式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;
    }
  }

效果：

就这个了!