渐变实战案例

把渐变组合起来，能做出许多过去必须切图的视觉。这里做一个常见的「渐变按钮 + 悬停提亮」和一个「渐变边框卡片」：

渐变按钮：主体用 135 度双色渐变，悬停时切换到亮一点的同族渐变，配合 transition 颜色平滑过渡。
渐变边框：妙招是双层背景——外层元素铺渐变作为「边框色」，内层用白色背景覆盖中间，只留 padding 宽度露出边缘渐变。也可以用 border-image，但双层背景兼容性更好。

配色建议：渐变两端取同一色相、不同明度（如 #39c5cf 到 #1d7f8a），比跨色相渐变更耐看；再叠一层从上到下的白色半透明高光，质感立刻提升。

本节要点渐变按钮悬停切换亮色版；渐变边框用「外层渐变 + 内层纯色留边」实现；同色相不同明度的双色渐变最稳妥。

CSS

<style>
  .btn {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #39c5cf, #1d7f8a);
    color: #fff;
    transition: background .3s;
  }
  .btn:hover {
    background: linear-gradient(135deg, #5ad4dd, #2699a5);
  }
  .card {
    width: 220px; padding: 2px;   /* 2px 就是边框宽 */
    border-radius: 12px;
    background: linear-gradient(135deg, #39c5cf, #7c4dff);
  }
  .card .inner {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
  }
</style>
<a class="btn">渐变按钮</a>
<div class="card" style="margin-top:10px;">
  <div class="inner">渐变边框卡片：外层渐变当框，内层白底留缝</div>
</div>

🔗 相关词条transition 兼容性元素过渡

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读