如何以渐变样式为我的列表制作带有自定义项目符号的边框? [英] How to make a border left with custom bullet for my list, in a gradient style?

问题描述

这就是我想要实现的:

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

我实际上已经实现了一些部分，但我想知道一种更好、更简洁的方法.

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

.list {列表样式:无；边框宽度:2px；边框样式:实心；边框图像:线性渐变(到底部，rgba(0, 0, 0, 0), rgba(179,179,179)) 0 0 0 1;}.物品 {底边距:1em；左边距:-1.7em；}.item::before {内容:\2022"；颜色:灰色；字体粗细:粗体；显示:内联块；宽度:1em；左边距:-1em；}

<li class="item">测试1<li class="item">测试2
<按钮>加号</button>

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

渐变线在开始时要透明得多，实际上不像目标"图片中的那样.边框在列表项结束的地方结束，所以直到按钮才会到达.

感谢任何帮助，直到我得到接近我的目标图片！

解决方案

我认为你的解决方案已经很不错了.我会用 border-radius 创建圆圈，因为您可以更好地控制大小和位置.

这是一个例子:

.list {列表样式:无；边框宽度:2px；边框样式:实心；边框图像:线性渐变(到底部，rgba(0, 0, 0, 0), rgba(179, 179, 179)) 0 0 0 1;边距:0 0 0 1em；}.物品 {位置:相对；}.item:before {位置:绝对；内容: "";宽度:6px；高度:6px；边界半径:50%；背景颜色:灰色；左:-2.75em；顶部:.4em；}按钮 {显示:内联块；宽度:2em；高度:2em；边距:-.2em 0 0 .25em；边界半径:50%；背景:#c00；白颜色;边界:无；}

<li class="item"><p>Test1<br>带换行符的测试</p><li class="item"><p>Test2<br>测试带有<br>两个换行符</p>
<按钮>+</按钮><ul class="list"><li class="item"><p>测试1</p><li class="item"><p>测试2</p><button>+</button>

This is what I want to achieve:

Items with white background are my list items. On the left side I want to have a border, with custom bullets (custom, since we cannot change the default list bullet color -black- AFAIK). The upper part of the border should have a gradient color, from transparent to grey color for instance. As you also see in the pic, the length of the border should be longer than the actual list height (until the plus button, not till the last item ends.)

I have actually achieved some parts but i would like to know a better, cleaner way of doing it.

This is what I have so far: 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>

Problems are still: Aligning of bullets to item text, even if I align the bullets on the border, when I resize the window, the bullets slides to left or right slightly.

The gradient line is far more transparent at the beginning, not actually like in the "Target" pic. And the border ends where the list items end, so it does not reach until the button.

I appreciate any help till I get something close to my target pic!

解决方案

I think your solution is already pretty good. I would create the circles with border-radius, as you have more control over the sizing and position.

Here is an example:

.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;
  margin: 0 0 0 1em;
}

.item {
  position: relative;
}

.item:before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: grey;
  left: -2.75em;
  top: .4em;
}

button {
  display: inline-block;
  width: 2em;
  height: 2em;
  margin: -.2em 0 0 .25em;
  border-radius: 50%;
  background: #c00;
  color: white;
  border: none;
}

<ul class="list">
  <li class="item">
    <p>Test1<br>test with line break</p>
  </li>
  <li class="item">
    <p>Test2<br>test with<br>two line breaks</p>
  </li>
</ul>
<button>+</button>


<ul class="list">
  <li class="item">
    <p>Test1</p>
  </li>
  <li class="item">
    <p>Test2</p>
  </li>
</ul>
<button>+</button>

这篇关于如何以渐变样式为我的列表制作带有自定义项目符号的边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！