Dan*_*iel 5 css linear-gradients css3
我已经看到在纯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,您将看到渐变按预期工作)
linear-gradient函数的第一个参数是应该应用渐变的方向.在相关的代码段中,它是to right,所以输出看起来像列.要将其更改为行,只需将方向更改to bottom为下面的代码段.
你可以在这里阅读更多关于linear-gradient它和它的论点.
div {
height: 300px;
background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}<div></div>以下是对渐变本身的解释,以便更好地理解:
linear-gradient,即颜色在直线上线性变化.to bottom指0%(或0px)位于容器的顶部并位于容器100%的底部.#a2ea4c 200px表示渐变的颜色为从顶部开始#a2ea4c的200px标记.#07aa91 200px表示在200px标记处,渐变的颜色突然从#a2ea4c变为#07aa91.这使得它成为一种难以停止的渐变,因为没有逐渐的颜色变化.#07aa91意味着颜色从200px标记到渐变结束保持不变.由于以下原因,第二个代码段中提供的渐变不可见:
#a2ea4c仅为前200px,但p元素的高度为300px.p默认情况下,标记是块级容器,当没有特殊的CSS样式时,它需要100%的宽度.p标签覆盖了具有不同颜色的渐变的整个区域.如果p用div(或因此导致自定义CSS应用)替换标记,则渐变将是可见的,因为width那时只有20%.
html {
background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}
div {
height: 300px;
width: 20%;
margin: 0 auto;
background: teal;
}<div>Lorem ipsum sit amet</div>