具有自定义大小的线性渐变

Question

我有这个设计：

它已经使用 html/css 创建，但我需要删除 1 和 5 的额外线条。 这是通过添加绝对位置元素来创建灰线来实现的，但容器点的大小是响应式的。

我的想法是为每个容器创建一个背景线性渐变，如下所示：

所有人：

background: linear-gradient(to right, grey 100%, transparent 0);

第一个：

background: linear-gradient(to left, grey 50%, transparent 0);

最后一个：

background: linear-gradient(to right, grey 50%, transparent 0);

但我不知道如何使它变小：

Answer 1

假设所有项目的宽度相等，那么渐变应该从 1 的中点开始，到 5 的中点结束，这意味着它应该从 10% 标记开始，到 90% 标记结束，类似于 @ 987654321@.

要限制背景的大小，可以使用background-size: 100% [DESIRED_HEIGHT]来控制。假设您希望栏的厚度为 16px，那么您可以使用background-size: 100% 16px。将其与 background-repeat: no-repeat 结合使用可避免渐变重复，将其与 background-position: center center 结合使用可使其居中。

参见概念验证示例：

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  
  background-image: linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%);
  background-size: 100% 8px;
  background-repeat: no-repeat;
  background-position: center center;
}

ul.colors {
  background-image: linear-gradient(
    to right,
    transparent 10%,
    red 10%,
    red 30%,
    orange 30%,
    orange 50%,
    green 50%,
    green 70%,
    blue 70%,
    blue 90%,
    transparent 90%
  );
}

ul li {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

<strong>Plain</strong>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<br /><br />
<strong>Colors</strong>
<ul class="colors">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Answer 2

另一个想法是考虑第一个和最后一个项目的负边距等于大小的一半：

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:linear-gradient(grey 0 0) center/100% 10px no-repeat;
}


ul li {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul li:first-child {
  margin-left:-24px;
}
ul li:last-child {
  margin-right:-24px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>