如何在 Theme-ui 中使用渐变值？答案

【问题标题】：How to use gradient values with Theme-ui?如何在 Theme-ui 中使用渐变值？
【发布时间】：2020-04-16 07:25:10
【问题描述】：

我正在使用https://theme-ui.com/ 来设置我的组件的样式。就体验而言，一切都很棒，但我根本无法使渐变值起作用。我有一个按钮，它的边框应该改变。我定义了以下变体：

 '&: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 配置文件中使用渐变值？

【问题讨论】：

标签： linear-gradients theme-ui

【解决方案1】：

如果您想在 CSS 中使用渐变作为边框颜色，请参见此处：Gradient borders

上面的回答是这样说的：

WebKit 现在（至少 Chrome 12）支持渐变作为边框图像：

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

证明链接：http://www.webkit.org/blog/1424/css3-gradients/

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

我认为这不是主题 UI 问题。

【讨论】：