.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> 这篇关于如何以渐变样式为我的列表制作带有自定义项目符号的边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
