Question

我见过用纯CSS创建的垂直列，如下所示：

div {
  height: 300px;
  background: linear-gradient(to right, #a2ea4c 200px, #07aa91 200px, #07aa91);
}

<div></div>

是否有可能以与上述类似的方式制作固定大小的水平标题，即仅使用CSS？

**编辑**

以下是我正在尝试做的最小例子。我不想在html标签上设置背景渐变，以便在页面的顶部和底部有不同的过卷颜色，中间有可变的，有时是透明的内容。使用可变内容填充页面时，渐变会使用第一种颜色完全填充页面。如下例所示。

html {
    background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}

div {
  height: 300px;
  width: 20%;
  margin: 0 auto;
  background: teal;
}

<html>
  <body>
    <p> Lorem ipsum sit amet</p>
  </body>
</html>

（如果您切换div标签的p-tag，您会看到渐变按预期工作）

Answer 1

linear-gradient函数的第一个参数是应该应用渐变的方向。在相关代码段中，它是to right，因此输出看起来像列。要将其更改为行，只需将方向更改为to bottom，如下面的代码段所示。

您可以详细了解linear-gradient及其参数here。

div {
  height: 300px;
  background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}

<div></div>

以下是对渐变本身的解释，以便更好地理解：

渐变是linear-gradient，也就是说，颜色在直线上呈线性变化。
方向为to bottom，表示0%（或0px）位于容器的顶部，100%位于容器的底部。< / LI>
#a2ea4c 200px表示渐变的颜色为#a2ea4c，直到距离顶部200px标记。
#07aa91 200px表示在200px标记处，渐变的颜色从<{1}}突然变为到#a2ea4c。这使得它成为硬停止渐变，因为没有渐变的颜色变化。
#07aa91表示从#07aa91标记到渐变结束的颜色保持不变。

由于以下原因，第二个代码段中提供的渐变不可见：

渐变的颜色为200px仅适用于前200px，但#a2ea4c元素的高度为300px。
p标签默认为块级容器，当没有特殊的CSS样式时，它的宽度为100％。
如此有效，p标记覆盖了具有不同颜色的渐变的整个区域。

如果您将p标记替换为p（从而导致自定义CSS应用），则会显示渐变，因为div只会变为20％。< / p>

width

html {
  background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}
div {
  height: 300px;
  width: 20%;
  margin: 0 auto;
  background: teal;
}

水平锋利的背景渐变与特定长度的第一种颜色

1 个答案: