CSS 中的渐变边框 | CSS-Tricks

假设您需要在元素周围使用渐变边框。我的想法是这样的

没有简单的明显的 CSS API 可以做到这一点。
我将使用一个带有linear-gradient背景的包装元素，然后一个内部元素将遮挡大部分背景，除了周围的一条细边距。

也许像这样

如果您不喜欢包装元素的想法，您可以使用伪元素，只要负 z-index 值是可以的（如果父元素有自己的背景并且嵌套了很多，那就不行了）。

这是 Stephen Shaw 的一个例子，处理了border-radius过程

如果您不需要所有四条边，甚至可以将单个边放置为细长的伪元素矩形。

但不要完全忘记border-image，它可能是所有时间中最晦涩难懂的 CSS 属性。您可以使用它来获得即使是在单个边上的渐变边框

使用border-image和border-image-slice可能是渐变边框最简单的语法，但不幸的是，它与border-radius不兼容。

DigitialOcean 在另一个教程中记录了相同的方法。

RyanIndustries8

# 2018 年 12 月 28 日

这些都是很棒的解决方案，但我真的希望在不久的将来，边框上的线性渐变能成为现实。在制作 CSS 图形时确实会有所帮助。

Brad Kemper

# 2018 年 12 月 28 日

嗨，克里斯，

是的，它原本打算让你可以使用线性渐变和边框图像一起使用。如果你也需要圆角，你应该能够使用 SVG 和边框图像来实现。我之前成功地做过，没有任何角落变形或其他问题。如果你想让我发布一个例子，请告诉我。

Chris Coyier

评论的永久链接# 2018 年 12 月 28 日

我相信每个人都希望看到这样的演示作为参考，包括我自己！

Brad Kemper

# 2018 年 12 月 28 日

当我们设计边框图像如何工作时（很多年前），想法是图像将包含您想要的任何圆角或花哨的角落，而边框半径将只用作回退，而不是进一步剪裁角落的东西。

sonya brimecombe

评论的永久链接# 2019 年 1 月 7 日

是的，我同意，我也会做同样的事情。

Doug S.

# 2018 年 12 月 28 日

在我的 Firefox 64 上不起作用，直到我将border-image更改为border-image-source，因为border-image-slice: 1在级联中被覆盖。

Anders Grimsrud

# 2018 年 12 月 28 日

有趣的是，浏览器对最后一个例子的支持似乎不一致。当border-image-slice在前面声明，并且border-image简写没有设置切片值时，如上面的示例中，Firefox 64 和 iOS 12 上的 Safari 使用默认切片值（即 100%，导致border-image: <image> 100%;），而 Chrome 71 和 Opera 将先前声明的值级联到简写中（这将给出border-image: <image> 1;）。

Brad Kemper

评论的永久链接# 2018 年 12 月 28 日

简写通常会将长手重置为其初始值，如果省略它们，所以我不明白为什么 Chrome 和 Opera 不会这样做。最后一个示例似乎在 iOS12 中通过将这两个类中的border-image更改为border-image-source得到修复。
SelenIT

评论的永久链接# 2019 年 1 月 1 日

看起来很像是 Chromium 中的级联错误。有趣的是，Chrome DevTools 在“样式”和“计算”选项卡中都显示border-image-slice的值1已删除，并且“计算”样式选项卡显示来自简写声明的值100%覆盖了它——正如预期的那样——但是值1似乎以某种方式神秘地“幸存”下来了这次覆盖。

顺便说一句，我不同意border-image（及其长手子属性）是“晦涩难懂的”。它可以说是所有时间中最被误解的 CSS 属性，并且可能被严重低估，尤其是在与 SVG 图像结合使用时。它的一些功能，例如 9 切片缩放，以及——尤其是——在元素框外部绘制内容（通过border-image-outset）在 CSS 中是独一无二的，并且可以为许多原本需要伪元素或甚至额外标记的案例提供更短更简洁的解决方案。

Joe Kotlan (@Jkotlan)

# 2018 年 12 月 29 日

不确定最后两个。我在 iOS Safari 中得到了不同的结果。我会看一下。

ccprog

# 2018 年 12 月 29 日

这里有一个使用 SVG 的变体：https://codepen.io/ccprog/pen/BvwbKX?editors=1100 它试图尽可能多地将细节暴露给 CSS。请注意，SVG 2 将允许rx/ry被定义为 CSS 属性，但实现尚未完成。渐变定位也必须在标记中完成。边框定位遵循 SVG 规则，这意味着一半的边框会溢出框。

George W. Park

# 2018 年 12 月 31 日

我有一个笔，展示了如何使用 background-clip 创建圆角渐变边框 https://codepen.io/GeorgePark/pen/EEGJEj

Jupago

# 2019 年 1 月 1 日

感谢您撰写这篇文章！我最近在学生想要动画渐变边框时使用了第一个选项。
效果很好：https://codepen.io/jupago/ 不知道关于边框图像切片。也许尝试剪切路径也很有趣。那篇关于剪切路径的 24ways 文章让我想知道它是否最终会成为下一个最佳选择。 https://24ways.org/2018/clip-paths-know-no-bounds/

Klesus

# 2019 年 1 月 1 日

一直在玩 Stephen Shaw 的 ::before 边框。我尝试将其应用到我的一个工作项目中，似乎如果你对基本元素应用任何类型的变换，则伪元素会覆盖基本元素的背景颜色/图像。我不知道有任何方法可以使它与变换一起使用，只是一些需要注意的地方，以及一个寻找解决方法的挑战。

Alex Overbeck

# 2019 年 4 月 19 日

我能够使用多个背景和background-origin属性为这个问题想出一个非常简单、单元素的解决方案。

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

这种方法的好处是
1. 它不受 z-index 的影响
2. 它可以通过简单地更改透明边框的宽度轻松缩放

看看：https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

Chris Coyier

# 2022 年 1 月 31 日

来自读者 Fabian Michael

嗨，我找到了另一个解决方案，基于良好的 9 切片缩放技术。 CSS 非常广泛，但它不需要文档中的任何额外的 SVG 元素或任何额外的元素嵌套，对于你们中的有些人来说可能很有趣

Geoff Graham

# 2022 年 11 月 21 日

来自读者 Blaz Kemperle 的另一个

我需要一个带有边框渐变和半径以及透明背景的响应式按钮，在开发人员说“做不到”之后，我独自编码了它。

Geoff Graham

# 2023 年 2 月 3 日

来自读者 Rogério Chaves 的另一个

你可以添加clip-path: inset(0 round 5px)

此评论线程已关闭。如果您有重要信息要分享，请联系我们。