0

我正在使用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 配置文件中使用渐变值？

4

1 回答 1

1

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

这就是最佳答案所说的：

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 问题。

于 2020-04-17T00:09:29.823 回答