如何只填充 border-bottom 的一半？

Question

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

border-bottom-color: #eee;

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

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

下面添加一个 div 和 height: 1px

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 也可能涉及。

Answer 2

正如 j08691 在评论中指出的那样，对此使用 linear-gradient 可能是更好的主意（或者您可以使用半宽伪元素并定位它）。

Using linear-gradient as background-image:（比border-image有更好的浏览器支持）

所需要的只是创建所需厚度的渐变（在下面的代码片段中为 2px），将渐变图像的宽度设置为元素宽度的 50%，然后定位图像。

ul {
  list-style-type: none;
}
ul li {
  float: left;
  padding: 8px;
  background-image: linear-gradient(#eee, #eee); /* no color change, just one color */
  background-size: 100% 2px; /* 2px is thickness of the border */
  background-repeat: no-repeat; /* don't repeat background */
  background-position: 100% 100%; /* by default position w.r.t right bottom */
}
ul li:first-child,
ul li:last-child {
  background-size: 50% 2px; /* set bg size as half width for first and last li */
}
ul li:last-child {
  background-position: 0% 100%; /* override position w.r.t left bottom for last li */
}

<ul>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
</ul>

使用 linear-gradient 作为 border-image:

对于这种方法，我们需要创建一个一半透明的渐变，另一半创建 #eee 并将其设置为 border-image 属性的值。

ul {
  list-style-type: none;
}
ul li {
  float: left;
  padding: 8px;
  border-bottom: 2px solid #eee;
}
ul li:first-child {
  border-width: 0px 0px 2px 0px;
  border-image-source: linear-gradient(to right, transparent 50%, #eee 50%);
  border-image-slice: 1;
}
ul li:last-child {
  border-width: 0px 0px 2px 0px;
  border-image-source: linear-gradient(to left, transparent 50%, #eee 50%);
  border-image-slice: 1;
}

<ul>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
</ul>

Answer 3

你可以使用伪元素来解决这个问题。

只需在 :first-child 上放置一个 :before 并在 :last-child 上放置一个 :after 然后将边框应用于这些伪元素，如下所示：

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 200px;
}

li {
  padding: .5em 0;
  position: relative;
  display: inline;
}

li:first-child:before,
li:last-child:before {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 5px solid #eee;
  width: 50%;
}

li:first-child:before {
  left: 0;
}

li:last-child:before {
  right: 0;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

如果您想尝试一下样式，这里还有一个代码笔 link：

CODEPEN LINK

如何只填充 border-bottom 的一半？

How to fill only half of border-bottom?

css

border

linear-gradients