如何只填充边框底部的一半？

Question

我有几个<li>内联列出，每个都有以下属性：

border-bottom-color: #eee;

我试图第一个和最后一个目标<li>并填充它们border-bottom，#eee但只填充一半。结果，第一个的底部边框<li>将从右侧开始填充 50%，最后一个的底部边框<li>将从左侧开始填充 50%。

我怎样才能做到这一点？除了可能只是height: 1px在我的ul.

Answer 1

您可以使用linear-gradient, background-size,background-repeat和background:position：

p {
  border:solid;
  width:350px;
  margin:auto;
  border-bottom:none;
  background:linear-gradient(black,black) bottom /* left or right or else */ no-repeat;
  background-size:50% 3px;

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

它甚至可以动画：http : //codepen.io/gc-nomade/pen/IGliC

别的; 也可能涉及box-shadow或 border-image。