设置线性渐变高度和宽度

Question

我知道您可以使用

设置线性渐变的宽度

    .grey-block { background: linear-gradient(to right, #f9f9f9 0%, #f9f9f9 35%, white 35%, white 100%); }

还有身高

    .grey-block { background: linear-gradient(to bottom, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }

但是，有没有一种方法可以使用同一条 css 行同时设置高度和宽度？

Answer 1

您可以指定一个角度。这应该可以解决问题。

.grey-block { background: linear-gradient( 135deg, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }

Answer 2

澄清一下，问题中的代码是不是设置渐变的height和width。它正在调整色标，从而产生灰色矩形。

为了调整渐变的实际尺寸，我们需要使用background-size属性（以及background-repeat）来设置height和width 的渐变。

在 background-size 控制渐变维度的情况下，我们可以将 CSS 重写为：

.grey-block {
  background-color: white;
  background-image: linear-gradient(#f9f9f9, #f9f9f9);
  background-size: 35% 65%;
  background-repeat: no-repeat;
}

发生的事情是我们正在定义纯色的 "gradient" 并限制它的大小。 background-repeat 被禁用，因此它只会呈现一个灰色块。

.grey-block {
  background-color: white;
  background-image: linear-gradient(#f9f9f9, #f9f9f9);
  background-size: 35% 65%;
  background-repeat: no-repeat;
}


/* non-relevant styles */
body {
  background-color: #222;
}
.grey-block {
  height: 200px;
  width: 200px;
}

<div class="grey-block"></div>

设置线性渐变高度和宽度

Setting linear gradient height AND width

css

linear-gradients