Question

我尝试使用渐变背景和渐变边框设置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; }属性才能使边框呈现渐变。

 git log --pretty=%P -n 1 <commit>
 git show --pretty=%P <commit>

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

Answer 1

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

＆＃13;

    .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%     
    }

＆＃13;

Answer 2

您可以将规则应用于伪元素：before或：after然后将伪元素放置在锚点上。

how to add a pseudo-element gradient effect

希望有所帮助！

Answer 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;
}

<a class="btn-primary">test</a>

CSS渐变（背景和边框）

3 个答案: