CSS渐变（背景和边框）答案

【问题标题】：CSS gradient (background and border)CSS渐变（背景和边框）
【发布时间】：2017-10-26 14:38:36
【问题描述】：

我正在尝试使用渐变背景和渐变边框设置<a> 标记的样式。

我按照在线教程使用正确的颜色对其进行了调整，但随后意识到需要设置 background-image 属性才能使边框具有渐变效果。

.btn-primary {
    background-color: blue;
    background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%);
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 10% 100%;
    border-bottom: 4px solid #f15a24;
    border-top: 4px solid #f7931e;
    box-sizing: border-box;
    margin: 50px auto;
}

有没有办法修改代码，以便为按钮的背景指定一个不同的渐变？

【问题讨论】：

标签： html css anchor gradient linear-gradients

【解决方案1】：

您可以使用border-image 作为边框，只使用background-image 作为背景渐变。就像这样：

    .btn-primary {
        background-color: blue;
        background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%);
        background-position: 0 0, 100% 0;
        background-repeat: no-repeat;
        background-size: 10% 100%;
        border-bottom: 4px solid #f15a24;
        border-top: 4px solid #f7931e;
        box-sizing: border-box;
        margin: 50px auto;
        border-image: linear-gradient(to left, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%     
    }

【讨论】：

【解决方案2】：

您可以将您的规则应用到伪元素 :before 或 :after 上，然后将伪元素放置在您的锚点上。

how to add a pseudo-element gradient effect

希望有帮助！

【讨论】：

【解决方案3】：

这是一种使用多个背景渐变创建渐变边框错觉的方法：

.btn-primary {
  display:inline-block;
  padding:80px;
  
  background: linear-gradient(to bottom, transparent 0, transparent 30px, blue 30px, white calc(100% - 30px), transparent calc(100% - 30px), transparent 100%), linear-gradient(to left, red 0%, yellow 100%);
  background-repeat: no-repeat;
  background-position: 30px 0, 0 0;
  background-size: calc(100% - 60px), auto;
}

&lt;a class="btn-primary"&gt;test&lt;/a&gt;

【讨论】：