时间戳

首页 > 解决方案 > 如何以渐变样式为我的列表制作带有自定义项目符号的边框？

html - 如何以渐变样式为我的列表制作带有自定义项目符号的边框？

问题描述

这就是我想要实现的目标：

在此处输入图像描述

白色背景的项目是我的列表项目。在左侧，我想要一个带有自定义项目符号的边框（自定义，因为我们无法更改默认列表项目符号颜色 -black- AFAIK）。边框的上部应具有渐变色，例如从透明到灰色。正如您在图片中看到的那样，边框的长度应该比实际的列表高度长（直到加号按钮，直到最后一个项目结束。）

我实际上已经完成了一些部分，但我想知道一种更好、更清洁的方法。

这是我到目前为止所拥有的：https ://jsfiddle.net/6esLm8q1/

.list {
  list-style: none;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(179,179,179)) 0 0 0 1;
}

.item {
  margin-bottom: 1em;
  margin-left: -1.7em;
}

.item::before {
  content: "\2022";
  color: grey;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}
<ul class="list">
<li class="item">
Test1
</li>
<li class="item">
Test2</li>
</ul>

<button>Plus
</button>

问题仍然存在：项目符号与项目文本对齐，即使我在边框上对齐项目符号，当我调整窗口大小时，项目符号也会稍微向左或向右滑动。

渐变线在开始时更加透明，实际上不像“目标”图片中那样。边框在列表项结束的地方结束，所以直到按钮才到达。

我很感激任何帮助，直到我得到接近我的目标图片的东西！

标签： htmlcss

解决方案

你在那里得到了 99%。对于linear-gradient，如果您将端点定义为低于100%，那么您会使其更早褪色。否则，它会计算出终点100%，因此一半的边框看起来会褪色。

对于before伪元素，因为在你的标记中你p在 each 中放置了一个标签li，你应该把伪元素放在p标签本身上。

请参阅下面的片段。

.list {
  list-style: none;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,  rgba(179,179,179) 40%) 0 0 0 1; /* add % to have gradient end earlier than end */
}

/* add before pseudo-element on p tag (since you include it in your markup */
.item>p:before {
  content: "\2022";
  color: grey;
  font-weight: bold;
  margin-left: -2.7em;
}
<ul class="list">
    <li class="item">
        <p>
            Test1
        </p>
    </li>
    <li class="item">
        <p>
            Test2
        </p>
    </li>
</ul>

<button>Plus</button>

推荐阅读