如何为GTK分隔符创建垂直线性渐变

Question

我正在使用Gtk 3.10，我第一次尝试了一些Gtk编程的CSS主题方面。

从gtk3-demo中我注意到了这个优秀的例子

从关联的CSS文件中我可以看到这个＆＃34;处理栏＆＃34;实际上是一个居中的渐变填充：

.pane-separator {
  background-color: alpha(white, 0.80);
  background-image: linear-gradient(transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: center;
}

.pane-separator:prelight {
  background-image: linear-gradient(transparent, transparent 1px, #555 1px, #555 4px, transparent 4px);
}

所以在我天真的时候，我想我会将它应用到我的Gtk应用程序中 - 我希望垂直窗格分隔符能够将其置于中心位置＆＃34; handle＆＃34;以及水平窗格分隔符

你可以看到，水平窗格分隔符工作（1）但是垂直窗格分隔符（2）＆amp; （3）放置＆＃34;手柄＆＃34;在顶部。

我以为我会使用CSS example中的transform: rotate(90deg);，但这在Gtk中无效

gi._glib.GError: gtkthemeoverride.css:18:11'transform' is not a valid property name

我使用它作为我的参考答案来使用Python＆amp; Gtk.CssProvider（）加载我的等效＆＃34; style.css＆＃34;

如何将垂直手柄置于Gtk中心 - 我需要对CSS文件进行哪些更改？

---

我尝试使用＆＃34; 90deg＆＃34;在CSS元素中 - background-image: linear-gradient(90deg, transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);

这是结果 - 在垂直窗格中没有句柄 - 但在水平方向上是90度旋转（只是测试 - 我稍后将使用单独的CSS元素来区分垂直和水平）

Answer 1

.pane-separator#vertical_paned {

  background-image: linear-gradient(to left, transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);
  background-size: 100% 15%;
  background-repeat: no-repeat;
  background-position: center;
}

.pane-separator:prelight#vertical_paned {
  background-image: linear-gradient(to left, transparent, transparent 1px, #555 1px, #555 4px, transparent 4px);
}

最后，我找到的关键部分是使用渐变的direction element向左或向右，以及{{3}以宽度与高度的百分比表示 - 在这种情况下，100％宽度，15％高度。

此外，我添加了命名的CSS元素 #vertical_paned 。可以使用方法 widget.set_name（name）使用名称定义每个python小部件，因此我定义了两个垂直窗格，如图所示，具有相同的名称​​ vertical_paned 和应用了特定于这些窗格的CSS元素。

Answer 2

background-position属性有两个值，一个用于水平，一个用于垂直。它们都默认为0％，这就是为什么你的原始尝试出现在顶部：它是水平居中但不是垂直居中。

试试这个：

background-position: center center;