CSS 中的渐变边框

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

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

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

也许像这样

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

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

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

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

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

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