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

Question

我正在使用 Gtk 3.10，这是我第一次尝试 Gtk 编程中的一些 CSS 主题方面的内容。

我从 gtk3-demo 中找到了一个很棒的例子。

从相关的 CSS 文件中，我发现这个“把手”实际上是一个居中的渐变填充：

.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 应用程序中——我希望垂直的分隔条也有这个居中的“把手”，还有水平的分隔条。

如你所见，水平的分隔条（1）工作得很好，但垂直的分隔条（2）和（3）却把“把手”放在了顶部。

我想用 transform: rotate(90deg); 这个来自 CSS 示例 的代码，但在 Gtk 中这并没有效果。

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

我把这个作为我的参考答案，使用 Python 和 Gtk.CssProvider() 来加载我自己的“style.css”。

我该如何在 Gtk 中居中垂直的把手——我需要对 CSS 文件做哪些修改呢？

---

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

结果是这样的——垂直的分隔条没有把手，但水平的分隔条却旋转了90度（只是测试一下——我稍后会使用不同的 CSS 元素来区分垂直和水平）。

Answer 1

background-position这个属性需要两个值，一个是水平位置，一个是垂直位置。它们的默认值都是0%，所以你最开始的设置看起来是在顶部：它在水平方向上是居中的，但在垂直方向上却没有。

试试这个：

background-position: center center;

Answer 2

.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);
}

最后我发现关键的部分是使用渐变的 方向元素，可以设置为 向左 或 向右，同时结合使用 背景大小，这个大小用百分比来表示宽度和高度——在这个例子中，宽度是100%，高度是15%。

此外，我还添加了一个命名的CSS元素 #vertical_paned。每个Python小部件都可以通过 widget.set_name(name) 方法来定义一个名字，因此我把两个垂直的面板都定义成了同一个名字 vertical_paned，这样就可以把特定于这些面板的CSS元素应用上去。