如何在主题ui中使用渐变值？

Question

我正在使用https://theme-ui.com/来设计我的组件。到目前为止，作为一种体验，一切都很精彩，但我就是不能让梯度值起作用。我有一个按钮，hove上的边框应该改变。我定义了以下变体：

 '&:hover': {
   color: 'lightGraphite',
   borderBottom: '1px solid',
   borderBottomColor: '(linear-gradient(270deg, #FE9A8B 0%, #FD868C 40.85%, #F9748F 73.15%, #F78CA0 100%))'
 }

当我打开应用程序时，边框是灰色的，在开发工具中，我看到了property-invalide-value或类似的东西。

如何在theme-ui配置文件中使用渐变值？

Answer 1

如果你想在CSS中使用渐变作为边框颜色，请看这里：Gradient borders

上面的答案是这样说的：

WebKit现在(至少是Chrome12)支持渐变作为边框图像：

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink：http://www.webkit.org/blog/1424/css3-gradients/

浏览器支持：http://caniuse.com/#search=border-image

我不认为这是一个主题UI的问题。